ドロワーメニュー実装に使える！jQueryプラグインDrawerについて

2017-05-19

どうも、すんです。
最近、レスポンシブ対応のサイトで多く使われている横からぬるっとでてくるメニュー、ありますよね。メニューボタンを押すと出てきて×印をクリックするといなくなるやつ。どうやらそれ、ドロワーメニューっていうらしいです。そんなドロワーメニューが簡単に実装できるjQueryプラグイン「Drawer」というものがあるらしいので、試しに使ってみました。

Drawer:ダウンロード

公式サイト：http://git.blivesta.com/drawer/内に、「Download on Github」というボタンがあります。ここから、必要なファイルのダウンロードが可能です。
ただしこのDrawerは、その必要なファイルがすべてCDNで提供されていました。なので、わざわざファイルをダウンロードしなくても以下コードをHTMLに記述する形でもOKです。

【CDN】

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

Drawer: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>

基本的にはこの中のheaderタグ内のコードがあればドロワーメニューは動作しますが、bodyタグの「drawer」「drawer–left」のclassは、忘れずに設定するようにしてくださいね。(適当にコードを抜粋して使ってみたらぜんっぜん動かなくて、このbodyのclassが無いせいだと気づくまでに30分ほど時間を使ってしまったのはここだけの秘密)

ちなみに、この「drawer–left」のclassを「drawer–right」にすると、右からメニューが出てくるようになります。

・「drawer–left」左からメニューが出てくる
・「drawer–right」右からメニューが出てくる

なんとなくですが、左から出てくるドロワーメニューの方が多く使われているような気がしますね。。。(主観)

Drawer:利用宣言

マークアップコードをhtml内に記述したら、あとはプラグインを呼び出すだけでOKです。

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

上記コードを貼り付ければ、ドロワーメニューが動作します！簡単！
※htmlマークアップコード内で定義されているclassは、極力変更しないまま使った方がいいです。この呼び出しコードの中でも「drawer」というclassに対してかかっているのがわかるように、適当に自分流に変えてしまうと、あれ？なんか動かないんだけど！？なんていうことになる可能性も…

Drawer:デモ

実は、プラグインの公式サイト自体がデモになっているんです。

公式サイト：Drawer – Flexible drawer menu using jQuery, iScroll and CSS.

ページ左上にあるハンバーガーメニューボタンをクリックしてみてください。横からぬるっと出てきて×印をクリックすると、すーっと戻っていきます。

このデモを見て、あれ？となられた方もいるんじゃないでしょうか。そうなんです、ドロワーメニュー内でドロップダウンするメニューが、このデモには組み込まれているんです。今まで紹介してきた公式サイトに載っているコードで実装しても、このドロップダウンメニューは実装されません。

Drawer:ドロップダウンメニューの実装

ということで、ドロワーメニュー内にドロップダウンを実装する方法についても書いていきたいと思います。

実装にはDrawerが推奨している「dropdown.js」を使います。
公式サイト：http://git.blivesta.com/drawer/dropdown/
ここにも「Download on Github」というボタンがあるので、必要なファイルのダウンロードが可能になっています。
ただし、先ほどと同じように以下コードをHTMLに記述する形でもOKです。

【CDN】

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

以下が、公式サイトに載っているドロップダウンのマークアップコードを先ほどのコード内に組み込んだものです。ここからがドロップダウンの中身、というコメントをうってある箇所がドロップダウン部分のコードになっています。

<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-menu-item" href="#">Left</a></li>
       <li class="drawer-dropdown">
         <a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">Navbar <span class="drawer-caret"></span>
         </a>
         <ul class="drawer-dropdown-menu">
           <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav1</a></li>
           <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav2</a></li>
           <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav3</a></li>
         </ul>
       </li>
     </ul>
     <!-- ここまでドロップダウンの中身 -->
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>

※利用宣言のコードは、さっき紹介したもののままで大丈夫です。

まとめ

ドロワーメニューにドロップダウンメニューも追加した、簡易デモはこちらからどうぞ。

今回は最近流行りのドロワーメニューをjQueryプラグインで実装してみよう、ということで、Drawerを使用した実装方法について紹介してみました。実装までの手順が全部公式のサイトに情報が掲載されていたので、めちゃくちゃ簡単に実装できました。超親切！！実装に必要なjs、cssファイルがCDNで提供されているのもすごくありがたいですね。

流行りの動きや、一見難しそうだなあと思う動きなんかもめちゃくちゃ親切な人たちがこうやって、使いやすいようにプラグインにしてくれたりするんだからすごいですよね…ありがたやありがたや…です。