1

窗口调整大小时隐藏的响应式导航。

大家好

我在这里有一个演示

http://www.ttmt.org.uk

和jsfiddle在这里

http://jsfiddle.net/VCPJu/

这是一个简单的水平 li 列表导航，在窗口调整大小时导航隐藏并显示菜单按钮。菜单按钮然后向下滑动现在垂直的导航。

如果我让窗口变小，打开向下滑动菜单并调整窗口大小，导航会返回到水平菜单。

我的问题是，如果我让窗口变小打开向下滑动菜单然后关闭然后将窗口大小调整为更大水平菜单不会再次显示。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        li{
          list-style:none;
        }
        #menu_btn{
          width:50px;
          height:30px;
          background:red;
          display:none;
          color:white;
          text-align:center;
        }
        #menu_btn:hover{
          cursor:pointer;
        }
        nav{
          margin:50px;
          display:block;
        }
        nav ul{
          display:block;
          overflow:auto;
          background:#eee;
        }
        nav ul li{
          display:inline;
        }
        nav ul li a{
          font-family:helvetica, sans-serif;
          float:left;
          display:block;
          padding:5px;
          background:#aaa;
          text-decoration:none;
          margin:0 5px 0 0;
          color:red;
        }

        @media only screen and (max-width:500px){
          #menu_btn{
            display:block;
          }
          nav ul{
            display:none;
          }
          nav ul li{
            display:block;
          }
          nav ul li a{
            float:none;
            margin:0 0 5px 0;
          }
        }
      </style>

      </head>

    <body>

      <nav>
        <a herf="#" id="menu_btn">Menu</a>
        <ul>
          <li><a href="">One</a></li>
          <li><a href="">Two</a></li>
          <li><a href="">Three</a></li>
          <li><a href="">Four</a></li>

        </ul>  
      </nav>  

      <script>
        $('#menu_btn').click(function(){
          $('nav ul').slideToggle();
        })
      </script>

    </body>

    </html>
4

2 回答 2

3

您将不得不使用一些 javascript 来检测屏幕大小并重置nav ul{display: block;}...原因是因为当您启动 jquery 时，它会将样式直接应用于您的元素，从而使您的内部 CSS 不想渲染.

编辑::: 这里可能是使用类http://jsfiddle.net/Pkk2h/的更简单的解决方案

于 2013-07-15T21:18:21.823 回答
1

这是一个老问题，但是我在寻找与我遇到的相同问题的解决方案时遇到了它，我想添加一个新答案，因为标记为已接受答案的答案并不完全正确。是的，Jquery 将 display 属性直接应用于您的元素，但是您不需要使用 Jquery 再次应用 display 元素，您可以简单地添加一个媒体查询，以确定屏幕大小何时显示您的全屏菜单，然后设置display: block!important;将覆盖 Jquery 显示集的菜单元素。希望这可以帮助任何未来的读者解决这个问题，如果问题的作者仍然活跃，我想你会接受我的回答。

@media only screen and (max-width: 950px){
    #nav {
        /* Apply your responsive menu for screen sizes smaller than 950px */
    }
}

@media only screen and (min-width: 951px){
    #nav {
        display: block!important;
    }
}
于 2014-07-25T16:24:37.433 回答