隐藏在窗口调整大小上的敏感导航

隐藏在窗口大小调整上的敏感导航。隐藏在窗口调整大小上的敏感导航

大家好

我这里有一个演示

http://www.ttmt.org.uk

和的jsfiddle这里

http://jsfiddle.net/VCPJu/

这是一个简单的横向力列表导航，在窗口调整导航皮并显示一个菜单按钮。菜单按钮然后向下滑动现在垂直的导航。

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

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

<!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>

来源

2013-07-15 ttmt

你将不得不使用一些JavaScript来检测屏幕尺寸和复位nav ul{display: block;} ...的原因是因为当你发射了您的jQuery的是应用样式直接向你的元素使你的内部CSS不想渲染。

编辑:::这里大概用http://jsfiddle.net/Pkk2h/

来源

2013-07-15 21:18:21 Banning

这是一个老问题类的简单的解决方案，但是我碰到它，而寻找一个解决同样的问题，因为它是发生在我，我想要添加一个新答案，因为被标记为接受答案的答案并非完全正确。是的，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-25 16:24:37 SigmaDanny

隐藏在窗口调整大小上的敏感导航

回答

相关问题