Jquery Superfish menu - How to slide up?
This is the jquery code for superfish menu plugin (after some revisions of mine). I'm looking to add an effect (either through superfish or adventitiously) that would cause the submenus to slide up on mouseout (just as they slide down when you hover a menu-top).
jQuery("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({
delay: 700, // delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: false 开发者_如何转开发 // disable drop shadows
});
You can't, currently. Straight from the code:
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
You can see that the show function calls animate(), whereas the hide function simply calls hide().
I'm not sure about the older versions of superfish but this is now easily accomplished (slidedown, and slideup) - like so
$('...').superfish({
hoverClass: 'sfhover', // the class applied to hovered list items
animation: {height: "show", marginTop: "show", marginBottom: "show", paddingTop: "show", paddingBottom: "show"}, // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open
animationOut: {height: "hide", marginTop: "hide", marginBottom: "hide", paddingTop: "hide", paddingBottom: "hide"}, // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed
});
However, you can make it work by hacking the code. I would submit a patch but the code development isn't hosted publicly.
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this)
.add(this)
.not(not)
// .removeClass(o.hoverClass)
.find('>ul').animate( {opacity: 'hide', height: 'hide'}, o.speed, function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
o.onHide.call($ul);
return this;
},
Correct way to achieve task of hiding superfish same as showing:
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
//hacked code by Farhan Wazir (Seejee)
var $ul_p1 = $(['li.',o.hoverClass].join(''),this).add(this).not(not);
var $ul_p2 = $ul_p1.find('>ul');
var $ul = $ul_p2.animate( {opacity: 'hide', height: 'hide'}, o.speed,
function(){ return $ul_p1.removeClass(o.hoverClass).find('>ul').css({top: '-99999em'}).addClass('sf-hidden');});
o.onHide.call($ul);
return this;
},
精彩评论