不平滑的jquery滑下菜單

我想添加一個下拉菜單到我的網站，以便當它低於一定的大小菜單適合屏幕（像其他人一樣）。到現在爲止一直很好，但我幾乎完成了，但滑動效果並不順利。不平滑的jquery滑下菜單

這裏是網站：http://www.divisionforty.com/wallspace/只是調整頁面大小，菜單會改變。

這裏是我使用的代碼：

的Jquery：

<script> 
    $(function() { 
     var pull  = $('#pull'); 
       menu  = $('nav ul'); 

     $(pull).on('click', function(e) { 
      e.preventDefault(); 
      menu.slideToggle("fast"); 
     }); 

     $(window).resize(function(){ 
      var w = $(this).width(); 

      if(w > 900 && menu.is(':hidden')) { 
       menu.removeAttr('style'); 
      } 
     }); 

     $('li').on('click', function(e) {    
      var w = $(window).width(); 
      if(w < 900) { 
       menu.slideToggle("fast"); 
      } 
     }); 


    }); 
    </script>

CSS：

這是所有我認爲需要

@media screen and (max-width: 900px) { 
    #pull{ 
      right:10px; 
      display: block; 
      position: absolute; 
      width:50px; 
      background-image: url("../img/nav_icon.png") no-repeat; 

} 
    #nav{ 
      display:none; 
      position: absolute; 
      padding-top:0; 

    } 

    #nav li { 
     width: 100%; 
     float: left; 
     position: relative; 
     border-bottom: 1px solid #262626; 
     } 
     #nav a { 
      text-align: left; 
      width: 100%; 
      text-indent: 25px; 
      background: #ffffff;   
     }  
     #nav a:hover { 
      color:#afafaf; 
     } 


}

。希望有人可以幫助我完成這個排序！

丹佛

來源

2013-07-18 Denver

設置height您#nav。

#nav { height: 100% }

來源

2013-07-18 05:52:18 grmmph

哇完美！非常感謝！丹佛 – Denver

您可能想要合併easing插件以獲得更流暢的動畫效果。

來源

2013-08-31 09:29:17

不平滑的jquery滑下菜單

回答

相關問題