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插件以获得更流畅的动画效果。

不流畅的Jquery下滑菜单

2 个答案: