簡化自定義響應菜單的標記（無引導！）

Question

我已經構建了一個自定義響應菜單，帶有漢堡包圖標，但沒有Bootstrap - 我不想使用Bootstrap。

問題是，我想使用簡單的標記來實現這一點，但我不得不添加一個單獨的導航，我顯示/隱藏媒體查詢，我知道有一個更好的方法，但我不是當然如何。

引導模型確實有一個單獨的導航與崩潰類，但我不應該能夠做到這一點，只需使用一個導航？

這裏是JS搗鼓什麼，我這麼遠：https://jsfiddle.net/zbu7ahmb/10/

在我看來，我不應該需要這麼多的標記來完成我想要的東西。我不希望這個菜單倒塌導航欄：

<div id="header" class="inline-container max-width space-between"> 
<div> 
    <h1>LOGO</h1> 
</div> 

<nav class="menu inline-container"> 
    <ul> 
     <li class="nav-btn"> 
      <button id="my_btn" class="nav-link btn-link">Link 1</button> 
      <ul class="sub-menu"> 
       <li class="section">Section 1</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
       <li class="section row">Section 2</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
     <li class="nav-btn"> 
      <button class="nav-link btn-link">Link 2</button> 
      <ul class="sub-menu"> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

<nav class="menu-collapsed"> 
    <div class="container nav-link" onclick="myFunction(this)"> 
     <div class="bar1"></div> 
     <div class="bar2"></div> 
     <div class="bar3"></div> 
    </div> 
    <ul class="sub-menu"> 
     <li class="section"><h3>Link 1</h3></li> 
     <li><a href="#">Sub link 1</a></li> 
     <li><a href="#">Sub link 2</a></li> 
     <li class="section row"><h3>Link 2</h3></li> 
     <li>Section 1</li> 
     <li><a href="#">Sub link 1</a></li> 
     <li><a href="#">Sub link 2</a></li> 
     <li class="row">Section 2</li> 
     <li><a href="#">Sub link 1</a></li> 
     <li><a href="#">Sub link 2</a></li> 
    </ul> 
</nav> 

我不應該能夠簡單地用1個導航欄是這樣的：

<div id="header" class="inline-container max-width space-between"> 
<div> 
    <h1>LOGO</h1> 
</div> 

<nav class="menu inline-container"> 
    <ul> 
     <li class="nav-btn"> 
      <button id="my_btn" class="nav-link btn-link">Link 1</button> 
      <ul class="sub-menu"> 
       <li class="section">Section 1</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
       <li class="section row">Section 2</li> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
     <li class="nav-btn"> 
      <button class="nav-link btn-link">Link 2</button> 
      <ul class="sub-menu"> 
       <li><a href="#">Sub link 1</a></li> 
       <li><a href="#">Sub link 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

最後，請注意，我必須讓我的「菜單摺疊子菜單」的寬度達到91％才能讓它橫跨......但它仍然有點偏離。解決這個問題的最好方法是什麼？

任何人有任何想法？感謝您的任何意見！

Answer 1

你可以有一個單一的菜單，你必須使用CSS媒體查詢來改變菜單項的樣式，而不是顯示/隱藏整個菜單。

1. 用你需要的結構創建你的html菜單。

2. 決定什麼是您的默認視圖。我更喜歡設計「移動優先」，因爲你通常有更多的限制，所以當你以後設計桌面時，你有更多的選擇和空間，對我來說更容易適應。

3. 在CSS文件中爲您決定的默認視圖創建CSS樣式。在該視圖中使菜單看起來和表現得像你想要的一樣。

4. 一旦你完成了這個工作，就可以爲其餘的視圖創建CSS Media Queries了。將這些規則放在您爲默認視圖創建的所有規則之後。現在，您並未改變整個菜單，只需對菜單和菜單元素進行樣式設置即可適應新的分佈和外觀。在大多數情況下，您將使用視口寬度作爲CSS媒體查詢的參數。如果您的默認樣式適用於移動設備，則可以添加CSS媒體查詢以在達到特定寬度後更改菜單。例如...

   nav.menu { position: absolute; z-index: 10; width: 100%; background-color: #1c8db0; display: none; } 
   nav.menu li.nav-btn { width: 100; } 
   nav.menu li.nav-btn ul li { width: 100; } 
   /* Your default styles for "mobile" here */ 
   
   @media only screen and (min-width: 1024px) { 
       nav.menu { position: relative; z-index: 0; width: auto; display: block; } 
       nav.menu li.nav-btn { width: 250px; } 
       nav.menu li.nav-btn ul li { width: 250px; } 
       /* Modify and add styles when the viewport is at least 1024px */ 
   } 
   
   @media only screen and (min-width: 1280px) { 
       nav.menu li.nav-btn { width: 350px; } 
       nav.menu li.nav-btn ul li { width: 350px; } 
       /* Modify and add styles when the viewport is at least 1280px */ 
   } 
   

   剛剛與風格發揮相適應的菜單，但請注意，在這樣的工作，你會改變你所創建的默認樣式，因此，如果您需要改變一個風格新寬度，你必須覆蓋它。

5. 那麼「漢堡按鈕」呢？創建它並將其放置在移動視圖必須的位置。然後，使用相同的媒體查詢將其隱藏起來。

這只是我創建響應式菜單的過程的快速說明。我不喜歡有不同的菜單，因爲通常很難保持。相同的菜單，但只是改變它的外觀。

我希望它有幫助。