2020/05/16 (更新日: 2021/07/24)

ドロワーメニューの実装方法【jQuery】

jQuery Programming

こんにちは！スズキです。

今回はドロワーメニューの実装方法について紹介します。

ドロワーメニューとは画面の外から現れるメニューのことです。

スマホ対応のwebサイトでよく見られます。

三本線のボタンをタップすると表示されるアレです。

このドロワーメニューはjQueryライブラリの「drawer.js」を利用すれば簡単に実装できます。

記事の内容

CDNの読み込み
コーディング
おまけ（簡単な見た目のカスタマイズ）

スポンサードサーチ

CDNの読み込み

コーディングの前に、CDNの読み込みを行います。

以下のコードをheadタグ内にコピペしてください。

<!-- drawer.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
  <!-- jquery & iScroll -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
  <!-- drawer.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

このコードで「drawer.css」、「drawer.js」、「jquery.js」、「iscroll.js」を読み込むことができます。

CDNの読み込みができたら、CSSファイルとjsファイルも用意しておきましょう。

これで準備完了です。

コーディング

まずは、サンプルを確認してください。

<br /> See the Pen <a href="https://codepen.io/zukkiblog/pen/OJyBXKp" class="broken_link">OJyBXKp</a> by suzuki<br /> (<a href="https://codepen.io/zukkiblog" class="broken_link">@zukkiblog</a>) on <a href="https://codepen.io" class="broken_link">CodePen</a>.<br />

HTML

<body class="drawer drawer--left">
  <header role="banner">
    <!-- ハンバーガーアイコン -->
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <!-- ハンバーガーアイコンここまで -->
    <!-- ナビゲーション -->
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
    <!-- ナビゲーションここまで -->
  </header>
  <main role="main">
    <!-- コンテンツ -->
  </main>
</body>

まずはHTMLから書いていくのですが、構成は基本的に公式サイトで紹介されているものをそのまま使ってください。

クラス名もできれば、そのまま使いましょう。

下手にいじると、思うように動かなくなります。

公式サイト

ただ、bodyタグの2つ目のクラス名については、適宜変更しましょう。

以下の2つから選べます。

drawer–left・・・ハンバーガーアイコンが左側に表示される
drawer–right・・・ハンバーガーアイコンが右側に表示される

jQuery

次に、jsファイルに以下のコードをコピペしてください。

// Drawerを有効化させる
$(document).ready(function() {
  $('.drawer').drawer();
});

このコードで、Drawerを有効化させることができます。

以上で、ドロワーメニューを実装できます。

スポンサードサーチ

おまけ（簡単な見た目のカスタマイズ）

最後に、簡単な見た目のカスタマイズをするCSSを紹介します。

// おまけ
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  background-color: red;
  height: 3px;
}

background-colorでハンバーガーアイコンの色、heightで線の太さを変更できます。

まとめ

いかがでしたか。

「drawer.js」を使うことで、簡単にドロワーメニューを実装することができました。

レスポンシブサイトを作成する際には、ほぼ必須な機能だと思うので、ぜひ試してみてください。

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks

jQuery Programming デイトラ