copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2018/11/08

jQueryライブラリを使わずに、JavaScriptだけでドロワーメニューを実装してみた。

Written by Yusuke Sugano

  • JavaScript

INDEX

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

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

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View