在手機上查看時創建可摺疊導航

我正嘗試創建一個菜單，當在手機上查看該頁面時摺疊到按鈕中。我使用引導程序，但對於此導航，我想以不同方式設計導航，所以我創建了自己的導航。在手機上查看時創建可摺疊導航

當媒體更改爲手機時，該按鈕不可見，但導航確實消失。如何在媒體大小更改時使按鈕顯示？

我試過很多東西，這就是我現在所擁有的：

HTML：

<div class="pattern col-lg-12 col-md-12 col-sm-6"> 
     <div class="banner col-lg-3 col-md-3 col-sm-2"> 
      <img src="img/logo4.png"> 
     </div> 
     <!-- menu --> 
     <div class="navbar-header"> 
      <button class="mnav-toggle" type="button" id="mnav-toggle"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="mnav col-lg-9 col-med-9 col-sm-4" id="navbar-main"> 
      <ul class="mnav-list" id="mnav-list"> 
       <li class="mnav-item"><a href="#">Contact</a></li> 
       <li class="mnav-item"><a href="#">About</a></li> 
       <li class="mnav-item"><a href="#">Artists</a></li> 
       <li class="mnav-item"><a href="#">Studios</a></li> 
       <li class="mnav-item"><a href="#">Gear</a></li> 
      </ul> 
     </div> 
    </div>

CSS：

@media (max-width: 767px) 
{ 
    .mnav-list {display: none;} 
} 

#mnav-toggle 
{ 
    display: none; 
}

來源

2014-06-22 wribit

您是否嘗試過插入＃mnav-toggle { display：block; }添加到您的媒體查詢中？ – webkit

確實，我做了...而且還是0喜歡我很害怕 – wribit

從我所看到的，你需要首先將「display：block」添加到您的查詢中，如上面註釋中所述;其次，媒體查詢應放置在您的基準css規則中，如下所示：

Working Example

#mnav-toggle 
{ 
    width:20px; height:50px; 
    background:red; 
    display: none; 
} 

@media all and (max-width: 767px) 
{ 
    .mnav-list {display: none;} 
#mnav-toggle{  display: block;} 
}

來源

2014-06-22 08:29:29 webkit

非常感謝你的這個，它的作品就像一個魅力:) – wribit

肯定:)祝你好運！ – webkit

這是因爲寫CSS規則以後得到優先於之前爲同一個元素寫入規則。

來源

2014-06-22 09:02:17 ebiv

在手機上查看時創建可摺疊導航

回答

相關問題