Question

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

大家好

我在这里有一个演示

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>

Answer 1

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

编辑:::使用课程http://jsfiddle.net/Pkk2h/

可能是一个更简单的解决方案

Answer 2

这是一个老问题，但我遇到了它，同时正在寻找解决同样问题的解决方案，我想要添加一个新的答案，因为被标记为已接受答案的答案是＆＃39完全正确。是的，Jquery将display属性直接应用于您的元素，但是您不需要使用Jquery再次应用显示元素，只需添加媒体查询，以便在屏幕大小显示全屏菜单时设置，然后设置菜单元素到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;
    }
}

隐藏在窗口上的响应式导航调整大小

2 个答案: