【jQuery】ドロワーメニューを簡単作成！Drawer.jsの使い方

どうも、ジャングルオーシャンのミケです。

今日はドロワーメニューが簡単に作れるDrawer.jsの紹介だよ。

ドロワーメニューとは

ドロワーメニューは、スマホサイトでよく使われるメニューの表示手法で

ボタンをクリックすると

横や縦からメニューがシュッと現れるものだよ。

サンプルページで確認してみてね。

サンプルデモページはこちら

ちなみにクリックするボタンは

横棒三本のアイコンが使われる事が多くて

このことをハンバーガーメニューと言うよ。

それでは実際にDrawer.jsを使って

ドロワーメニューを実装してみよう。

必要なファイルの用意

ファイルのダウンロード

まずはjQueryの設置をするよ！

jQueryの公式サイトからファイルをダウンロードしてね。

jQueryの公式サイトはこちら

次にDrawer.jsを入れるよ。

公式サイトからダウンロードしてね。

Drawer.jsの公式サイトはこちら

まずは「Step 1: Link required files」の

「Download」という項目から

「1.Drawer v3.2.2」をクリックしてね。

そうすると、GitHubのページに飛ぶので

「Clone or download」という緑のボタンをクリックして

ファイルをダウンロードしてね。

zipファイルがダウンロードできるので解凍して

中に入っているファイルを取り出してね。

必要なファイルは

srcフォルダの中のcssフォルダの中のdrawer.cssと

srcフォルダの中のjsフォルダの中のdrawer.jsの

2ファイルだよ。

最後にiScrollをダウンロードしよう。

さっきと同じように「Step 1: Link required files」の

「Download」という項目から

次は「3.iScroll Created by Matteo Spinelli.」をクリックしてね。

そうすると、またさっきと同じようにGitHubのページに飛ぶので

「Clone or download」という緑のボタンをクリックして

ファイルをダウンロードしてね。

zipファイルがダウンロードできるので解凍して

中に入っているファイルを取り出してね。

必要なファイルは

buildフォルダの中のiscroll.jsだよ。

これで必要なファイルは揃ったから

次にHTMLにファイルを読み込むコードを記述するよ。

<script src="jsを設置しているディレクトリ/jquery-3.4.1.min.js"></script>
<script src="jsを設置しているディレクトリ/iscroll.js"></script>
<script src="jsを設置しているディレクトリ/drawer.js"></script>

CDNを利用する

CDNを利用して各ファイルを読み込むこともできるよ。

HTMLに記述するソースコードは以下になるよ。

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery &amp; 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>

必要なファイルは揃ったので

次にHTMLを記述していくよ。

HTMLの記述

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">
    <!-- Page content -->
  </main>
</body>

<span class="sr-only">toggle navigation</span>

</button>

<li><a class="drawer-brand" href="#">Brand</a></li>

</ul>

</nav>

</header>

</main>

</body>

そして最後にスクリプトタグを記述すれば完成だよ。

<script>
$(document).ready(function() {
  $('.drawer').drawer();
});
</script>

$(document).ready(function() {

$('.drawer').drawer();

});

</script>

これで基本のドロワーメニューが完成！

全ての記述を一つのHTMLファイルにまとめるとこんな感じになるよ。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Drawer.js</title>
    <!-- drawer.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
    <!-- jquery &amp; 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>
    <script>
        $(document).ready(function() {
          $('.drawer').drawer();
        });
    </script>
</head>
<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">
        <!-- Page content -->
    </main>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Drawer.js</title>

$(document).ready(function() {

$('.drawer').drawer();

});

</script>

</head>

<span class="sr-only">toggle navigation</span>

</button>

<li><a class="drawer-brand" href="#">Brand</a></li>

</ul>

</nav>

</header>

</main>

</body>

</html>

この記述のサンプルページも作ってあるから見てみてね。

サンプルデモページはこちら

他のパターン

さっき紹介したドロワーメニューは

ハンバーガーメニューをクリックすると

左からメニューが現れたけど

右や上から表示させることもできるよ。

メニューを右から表示させる

右から表示させるには

さっきのHTMLの中にあった

<body class="drawer drawer--left">

1	<body class="drawer drawer--left">

このbodyの開始タグのクラス名を変更すれば右から表示されるようになるよ。

<body class="drawer drawer--right">

1	<body class="drawer drawer--right">

「drawer--left」となっている箇所を

「drawer--right」と変更することで

メニューが右から出るようになるよ。

右から出るサンプルデモページはこちら

メニューを上から表示させる

メニューを上から表示させることもできるよ。

右からメニューが出るようになったときと同じように

<body class="drawer drawer--left">

1	<body class="drawer drawer--left">

このbodyの開始タグのクラス名を変更すれば上から表示されるようになるよ。

<body class="drawer drawer--top">

1	<body class="drawer drawer--top">

「drawer--left」となっている箇所を

「drawer--top」と変更することで

メニューが上から出るようになるよ。

上から出るサンプルデモページはこちら

まとめ

実装はできたかな？

スマホでよく使われるメニューの表示手法だけど

自分で全て実装するとなると大変だから

こういうプラグインがあるとすごい便利だよね！

もし何かわからないことなどがあったら連絡してね。

それじゃまた今度！

TwitterやFacebookのフォローよろしくね！

Twitter
@michelgorilla

Facebook
ミケランジェロ