カスタム応答メニューのマークアップを簡略化します（ブートストラップなし！）

Question

ハンバーガーアイコン付きのカスタム応答メニューを作成しましたが、ブートストラップなし - 私はブートストラップを使用しません。

これを達成するためにシンプルなマークアップを使用したいのですが、メディアクエリで表示/非表示にする別のナビゲーションを追加する必要がありました。どうやって？

ブートストラップモデルには、折りたたみクラスの別のナビがありますが、1つのnavを使用してこれを行うことはできませんか？ここで

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

最後

：

<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ナビゲーションバーを使用することはできないはずです。私はこのメニュー崩壊ナビゲーションバーにはしたくありません私の「メニューが折りたたまれたサブメニュー」に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. 「ハンバーガーボタン」はどうですか？それを作成して、モバイルビュー用の位置に配置します。次に、同じメディアクエリを使用して非表示にします。

これは、反応性メニューを作成するための私のプロセスの簡単な説明です。私は異なるメニューを持っているのが好きではありません。なぜなら、通常は保守が難しいからです。同じメニューですが、見た目を変えるだけです。

私はそれが役に立ちそうです。