开发者

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;
},
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜