こんにちは。最近キャンプにハマっているエンジニアのsuganoです。

今回はスマホでよく見かけるハンバーガーボタンをクリックすると
横からスライドして現れるドロワーメニューについて紹介します。

ドロワーメニューはdrawer.jsなど使いやすいjQueryプラグインが存在しておりますが
自身のスキルアップのために、プラグインを使用しないでJavaScriptだけで
実装できるようコードを書いてみました。

HTML/CSS

まずは、HTMLです。
全体をwrapperで囲み、「メニュー部分」と「ハンバーガーボタン」は
それぞれ「nav」と「button」で囲んでいます。
buttonはハンバーガーボタンを表示するためのHTMLです。
レスポンシブを前提にしたコーディングを意識して書きました。
CSSについては、かなり長くなってしまうので割愛させていただきます。
ポイントとしては、ハンバーガーボタンをクリックすると
wrapper要素にnav-openクラスが付いてくるので
その直下にあるメニューとコンテンツのエリアにtransitionで
横からスライドして現れるように書いてみました。
全てのコードは一番下にあるcodepenに貼ってありますので、そちらをご参照下さい。

<div id="wrapper">

  <nav class="menu">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
    </ul>
  </nav>

  <button type="button" id="nav-btn" class="hamburger">
    <span class="bdr"></span>
    <span class="bdr"></span>
    <span class="bdr"></span>
  </button>

  <div id="contents">
    横幅が768pxになるとハンバーガーメニューが表示されます
  </div>

</div><!-- wrapper -->

JavaScript

次にドロワーメニューを動かすために、下記JavaScriptのコードを記述します。
説明はコードに書いていますので、割愛しています。
こちらの場合はJavaScriptのコードだけで書いているので、
jQueryライブラリを読み込む必要もなく使用できます。

(function () {

  //ハンバーガーボタンクリック時の関数
  //querySelector：CSSセレクタで要素を取得
  const $hamburger = document.querySelector('.hamburger');
  //addEventListener：イベント処理（click）
  $hamburger.addEventListener('click', function(){
    //ON時はis-activeクラス付与、OFF時はis-activeクラス削除
    $hamburger.classList.toggle('is-active')
  });

  //全体を囲む要素をid[#wrapper]で指定
  const $wrapper = document.getElementById('wrapper');
  //メニューオープン・クローズのボタン要素をid[nav-btn]で指定
  const $navBtn = document.getElementById('nav-btn');

  //クリックしたら navToggle関数実行
  $navBtn.addEventListener('click', navToggle);

  //navToggleの関数
  function navToggle() {
    //contains:文字列が引数に指定した文字列を含まれているかどうか[nav-open]
    if ($wrapper.classList.contains('nav-open')) {
      //メニュークローズ時
      navCloseFunc();
    } else {
      //メニューオープン時
      navOpenFunc();
    }
  }

  //メニューオープン時の関数
  function navOpenFunc() {
    //wrapperのclass[nav-open]付与
    $wrapper.classList.add('nav-open');
  }
  //メニュークローズ時の関数
  function navCloseFunc() {
    //wrapperのclass[nav-open]削除
    $wrapper.classList.remove('nav-open');
  }

})();

DEMO

まとめ

いかがでしたでしょうか。
自分はJavaScriptコードを自力で書けることはまだまだなので
とにかく書いて考えてどのようにアクションするのかが
良いインプットに繋がるのではないかと思っています。もちろんアウトプットも忘れずに！
このように一つ一つ調べていって、習得できたら
自分なりに一度サンプルで作ってみるのもありですね。
他にももっとスッキリ書けるドロワーメニューの実装方法があれば教えて下さい★
ドロワーメニューの開閉に限らず、様々に応用できるテクニックなので
今後も色々とやってみたいと思います！

ありがとうございました！！