2010-04-23 103 views
1

这是superfish菜单插件的jquery代码(在我的一些修订版之后)。我正在寻找添加效果(通过超级鱼或偶然),这会导致子菜单向上滑动(就像它们在您悬停菜单顶部时滑动一样)。Jquery Superfish菜单 - 如何向上滑动?

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 
    }); 

回答

2

你目前不能。直接从代码:

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

你可以看到show函数调用animate(),而hide函数只是调用hide()。

0

但是,您可以通过黑客代码使其工作。我会提交一个补丁,但是代码开发不是公开托管的。

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

正确的方式来达到隐藏快鱼一样显示的任务:

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

我不知道旧版本的快鱼,但现在这是很容易实现(了slideDown和效果基本show) - 像这样

$('...').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 
});