不平滑 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

您可能想要合并easing 插件以获得更流畅的动画效果。