はじめに

本記事ではjQueryを使用して、スマートフォン向けサイトなどで見る機会が多い「ハンバーガーメニュー」を作っていきます。
ハンバーガーメニューとは以下の場合、右上に設置されている物です。

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

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>

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

左側に表示されている物が、今回表示するメニューです。
普段は隠れていて、メニュー表示ボタンに対応して表示されるものですが、現段階では常に表示されていますね。
ちなみに、今の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;
}

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

おわり

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

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

はじめに

表示の仕組み

編集するファイル

viewの作成

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

JavaScriptの記述

おわり