隱藏在窗口調整大小上的敏感導航

隱藏在窗口大小調整上的敏感導航。隱藏在窗口調整大小上的敏感導航

大家好

我這裏有一個演示

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

隱藏在窗口調整大小上的敏感導航

回答

相關問題