Bootstrap｜ハンバーガーメニューを作成する

Bootstrapを用いて、ハンバーガーメニューを作成する方法

1. メニューを作成

⭐️div要素に classと idを追加する
　collapse, navbar-collapse ... ハンバーガーメニューで開く要素
　任意のid...ハンバーガーメニューで開く要素には任意のidを命名する

<nav>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav">
        <li>menu1<li>
        <li>menu2<li>>
        <li>menu3<li>>
        <li>menu4<li>
      </ul>
    </div>
</nav>

2.ハンバーガーメニュー部分を作成

⭐️解説
　button ... ハンバーガーメニューは button要素

　navbar-toggler ... ハンバーガーメニュー用のスタイル
　data-toggle="collapse" ... data-target の表示・非表示を切り替える
　data-target="#navbarDropdown" ...
　idが navbarDropdown の要素が表示切り替えの対象になる
　aria-controls="navbarDropdown" ... アクセシビリティ対応のための属性
　aria-expanded="false" ... アクセシビリティ対応のための属性
　aria-label="Toggle navigation ... アクセシビリティ対応のための属性
　
　span, class="navbar-toggler-icon" ... ハンバーガーメニューのアイコン

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
</button>

3.ハンバーガーメニュー部分を、元のメニュー部分の上に設置

⭐️全てを nav要素で囲むこと

<nav> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav">
        <li>menu1<li>
        <li>menu2<li>>
        <li>menu3<li>>
        <li>menu4<li>
      </ul>
    </div>
</nav>