[JavaScript][jQuery]ハンバーガーメニュー(ドロワー)

#はじめに
本記事ではjQueryを使用して、スマートフォン向けサイトなどで見る機会が多い「ハンバーガーメニュー」を作っていきます。
ハンバーガーメニューとは以下の場合、右上に設置されている物です。
![スクリーンショット 2020-05-14 13.47.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562008/9506c8ee-924c-0572-f875-50bf3d31f327.png)

今回は以下のような簡単な仕様で作成します。

- jQueryを使用
- 普段メニューは非表示
- メニュー表示ボタンにはimage画像を使用
- 押すと右側からメニューがスライドして表示
- 表示速度は0.3s

#### 表示の仕組み

- 普段はメニューを画面の右外に設置し、視覚的に隠しておく
- 表示ボタンが押されると画面全体が左にスライドし、右外に位置していたメニューが画面内に移動して視覚化される

#### 編集するファイル

- index.html
- style.css

以上のみです。なお今回は分かりやすくするためjQueryの記述はindex.htmlにしていきます。
CSSの内容については、基本的に割愛させていただきます。
また、メニューボタンのviewに関しては画像を使用しています。


## viewの作成

````index.html
<body>
  <div id="wrapper">
    <header>
      <div class="container">
        <div class="title-block">
          <h1>Sample ハンバーガー</h1>
          <h2>右にハンバーガーメニューを設置</h2>
        </div>
        <div class="hamburger" id="open_nav">
          <img src="hamburger.png" alt="">　<!-- メニュー表示ボタン -->
        </div>
      </div>
    </header>
    <main>
      <div class="container">
        <section>
          <div class="content">
            <h1>Qiita用</h1>
            <p>ハンバーガーメニュー<br>
                    よくスマートフォン用サイトで使われていますが、<br>
                    利便性はもちろんのこと、なによりオシャレですよね</p>
          </div>
        </section>
      </div>
    </main>
  </div>
  <nav id="nav">  <!-- 表示されるメニュー -->
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">メニュー１</a></li>
      <li><a href="#">メニュー２</a></li>
      <li><a href="#">メニュー３</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</body>
````

htmlに関しては、今回詳しく説明しませんが以下がメニューを表示するためのボタンで

````index.html
<div class="hamburger" id="open_nav">
  <img src="hamburger.png" alt="">
</div>
````
以下が、右側から表示されるメニューの内容です

````index.html
  <nav id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">メニュー１</a></li>
      <li><a href="#">メニュー２</a></li>
      <li><a href="#">メニュー３</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
````

おそらく、このような表示になっているかと思います。

![スクリーンショット 2020-05-14 14.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562008/04a8f24a-3032-e8b2-ef21-2a84bbb5c75b.png)

左側に表示されている物が、今回表示するメニューです。
普段は隠れていて、メニュー表示ボタンに対応して表示されるものですが、現段階では常に表示されていますね。
ちなみに、今のCSSはこのようになっています。

````style.css
    padding: 24px 24px 0 24px;
    background: gray;
    color: white;
    width: 270px;
    height: 100%;
    position: fixed;
    top: 0;
````

色などは、自由に変更してください。
このCSSを編集して、メニューを隠します。

## styll.cssを編集してメニューを隠す

````style.css
    padding: 24px 24px 0 24px;
    background: gray;
    color: white;
    width: 270px;
    height: 100%;
    position: fixed;
    top: 0;
    /* メニューの幅（width）と同じ数値を指定 */
    right: -270px;
````

これで、メニューは画面外に位置するため、視覚的に隠れたかと思います。
次に、メニューを表示させるためのCSSも追記していきます。

````style.css
.show {
  transform: translate3d(-270px, 0, 0);
}
````
showクラスを持つ要素を、左にスライドさせるための記述ができました。
あとは、表示ボタンが押されると、サイトのメイン部分である#wrapper と　#nav にshowクラスが付与されるようJavaScriptを記述していきます。

## JavaScriptの記述

````index.html
  <script src="../../_common/scripts/jquery-3.4.1.min.js"></script>
  <script>
    'use strict'

    $(document).ready(function () {
      // メニュー表示ボタンが押されると発火します //
      $('#open_nav').on('click', function () {
        // #wrapperと#navを取得し、showクラスを付与、または剥奪します //
        $('#wrapper, #nav').toggleClass('show');
      });
    });
  </script>
````

以上で、画面の右外に位置してしたメニューが表示されるようになったかと、思います。
これだけでも使用できるのですが、好みに合わせて以下のようにするのも、いいかと思います。

````style.css
#wrapper, #nav {
  transition: transform 0.3s;
}
````

表示のされ方が、右側からスライドして表示されるようになったかと思います。
あくまで好みの問題になりますので、ご自由に変更していただければと思います。

# おわり
これで、スマートフォンサイトでよく見る、通称「ハンバーガーメニュー」が完成しました。
実装方法は、今回ご紹介した方法以外のものもありますので、色々と試してみると面白いかもしれません。
最後まで読んでいただき、ありがとうございました。