不平滑Jquery向下滑动菜单

Question

我正试图在我的网站上添加一个下拉菜单，这样当它低于一定大小时，菜单就适合屏幕了（和其他人一样）。直到现在一切都很顺利，我几乎完成了，但幻灯片效果并不流畅。

这里是网站：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;
      }

}  

这就是我认为所需要的。希望有人能帮我解决这个问题！

丹佛

Answer 1

将height设置为您的#nav。

#nav { height: 100% } 

Answer 2

您可能希望加入轻松插件以实现更流畅的动画。