1

我正在尝试向我的网站添加一个下拉菜单，以便当它低于一定大小时，菜单适合屏幕（像其他人一样）。到目前为止一切顺利，我几乎完成了，但是幻灯片效果并不流畅。

这里是网站：http ://www.divisionforty.com/wallspace/只需调整页面大小，菜单就会改变。

这是我正在使用的代码：

查询：

<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;
      }


}

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

丹佛

4

2 回答 2

1

设置height为您的#nav.

#nav { height: 100% }
于 2013-07-18T05:52:18.263 回答
0

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

于 2013-08-31T09:29:17.073 回答