2010-04-23 240 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 
});