【jQuery】理想的なドロワーメニューの動きを実装できるプラグイン-Drawer-の使い方
2015/11/29
プラグイン作者の方よりv3.1.0へアップデートのご連絡をいただいたため記事の更新をしました。
ご連絡ありがとうございます！
なかなか思ったようなプラグインがないドロワーメニューですが、
このDrawerというプラグインは簡単に理想的なドロワーメニューを実装してくれます。
今回のアップデートではバグ潰しと機能の整理をされたそうです。
また、class名やマークアップも若干変わってるので、
すでに使ってる人も要チェックです。
お気に入りのプラグインなのでアプデありがたいです。
デザインもシンプルでかっこいい！
理想のドロワーメニュー
こんなドロワーメニューのプラグインあったらいいなーと思ってました。
- ハンバーガーメニューをタップすると横からメニューがでてくる。
- メニューが出てる間はハンバーガーメニューが×ボタンに変わる
- 横からでてきたメニューは、独立してスクロールできる
- ×ボタンやメニュー領域以外をタップすると閉じる。
これらを簡単に実装できるのが
「Drawer」。そのまんまです。
横からシュッと出てくるドロワーメニューの実装例ですが、他のパターンも後ほど紹介します。
ダウンロード
Drawer
まずはこのプラグインそのものをダウンロードしてきます。
Drawer
Drawerのサイトから「Download on GitHub」と書かれたボタンがあるのでクリック、
GitHubのページの右下辺りにある「Download zip」をクリックしダウンロード。
zipファイルを解凍します。
また、CDNも用意されています。
CDN
iScroll
このプラグインはメニュー部分のスクロールをiScrollというプラグインで動かしています。なのでiScrollもダウンロードしておきます。
iScroll
iScrollはダウンロードしてきたファイル一式の中にある「build」ディレクトリ内のiscroll.jsを使えば大丈夫です。
読み込み
headタグ内にjqueryとiScrollを読み込んでおきます。パスは自分の環境に合わせてやってください。
<script src="jquery.min.js"></script> <script src="iscroll.js"></script>
そして、Drawerのjsファイルとcssファイルを読み込みます。
jsフィイルは、ダウンロードファイルから「dist」→「js」とディレクトリをたどればあります。
CSSファイルは「dist」→「css」ディレクトリの中です。
<link rel="stylesheet" href="drawer.min.css"> <script src="drawer.min.js"></script>
CDNを使う場合は、以下のような感じです（圧縮版）。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
必要な読み込みは以上です。
jQuery
これだけです。
$(document).ready(function() {
$(".drawer").drawer();
});
css
cssは必須のものはありません。
メニューのデザインを好みに変えるだけなので、
navやulについてるclassを上手く使ってデザインカスタマイズしてください。
HTML
HTMLでタグにつけるclassを変更することでいろんなパターンを実装できます。
よく使いそうなものを抜粋してデモサイトを作ってみました。
demo1：ドロワーメニュー基本形
ハンバーガーメニューをクリックすると横からシュッと出てくる基本形です。
HTMLの構造はこんな感じです
<body class="drawer drawer--right">
<!-- ハンバーガーボタン -->
<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">
<ul class="drawer-menu">
<!-- ドロワーメニューの中身 -->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</nav>
<section>
<!-- コンテンツ部分 -->
</section>
</body>
これをコピペして、ドロワーメニューの中身と
コンテンツ部分を書き換えれば形にはなると思います。
bodyタグにdrawer-rightクラスを指定してますが、drawer-leftにすれば、
左から出てくるようになります。
demo2：上からシュッと出てくるやつ
これは基本形のbodyタグのclassを変えるだけです。
上からシュッと出てきます。
<body class="drawer drawer--top"> <!-- 省略 --> </body>
bodyのclassをdrawer-topにすると上から出てくるドロワーメニューになります。
demo3：サイドに固定されてるメニュー
最近よくみるUIなんですが、サイドに固定されてるメニューがあって、
メニューエリアとコンテンツエリアがそれぞれ独立してスクロールするようなものです。
縮めるとハンバーガーメニューが出てきてドロワーメニューに変わります。
<body class="drawer drawer--left drawer--sidebar">
<!-- ハンバーガーボタン -->
<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">
<ul class="drawer-menu">
<!-- ドロワーメニューの中身 -->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
</nav>
<section class="drawer-contents">
<!-- コンテンツ部分 -->
</section>
</body>
まずbodyのclassに「drawer-sidebar」を追加します。
そしてコンテンツ部分にあたるタグのclassにはdrawer-contentsをつけます。
これをつけないとサイドメニューのエリアを無視した横幅になってしまいます。
3つ紹介しましたが、それぞれclassを変えるだけでいろんなパターンを実装できるので、
いろいろと試してみてください。
プルダウンの多階層メニュー
先ほどのデモサイトでもプルダウンメニューを実装してますが、
これもDrawerに少し記述を追加するだけでできます。
まずはBootstrapのドロップダウンを読み込みます。
<script src="https://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.5/dropdown.min.js"></script>
そして、プルダウンにしたいところをこんな感じにします。
<ul>
<li>リスト1</li>
<!-- 省略 -->
<li class="drawer-dropdown">
<a href="#" data-toggle="dropdown">リスト9（プルダウン）</a>
<ul class="drawer-dropdown-menu">
<li>リスト9-1</li>
<li>リスト9-2</li>
<li>リスト9-3</li>
</ul>
</li>
<!-- 省略 -->
<li>リスト14</li>
</ul>
こうするとプルダウンの多階層メニューも実装できます。
イベントやメソッドなど
イベントやメソッドもあるので、プルダウンが開いたらこうしたいとかあれば追加できます。
イベント
メニューが開いたとき
$('.drawer').on('drawer.opened', function(){
console.log("開きました");
});
メニューが閉じたとき
$('.drawer').on('drawer.closed', function(){
console.log("閉じました");
});
メソッド
メソッドも必要に応じて使えます。
// メニューを開く
$('.drawer').drawer('open');
// メニューを閉じる
$('.drawer').drawer('close');
// 開いてたら閉じて、閉じてたら開く
$('.drawer').drawer('toggle');
// ドロワーメニューの機能停止
$('.drawer').drawer('destroy');
条件とか追加して、開いたり閉じたりするタイミングをコントロールできそうですね。
まとめ
簡単に使えて、本格的なドロワーメニューを実装できる上に、動きも綺麗。
申し分ないぐらいオススメなプラグインです。
他にも実装例はDrawerのサイトに書かれているので、ぜひ参考にしてみてください。
Drawer
類似プラグイン
hiraku.js
アクセシビリティ対応のドロワーメニューです。また、Drawerと同様、メニューを開いてる時にスクロール固定、メニューはスクロールという仕様ですが、CSSでやってるので若干動きが微妙なところがあります。
ただ、すごく細かい所なので、気にならなければ、すごくいいプラグインだと思います。
Slidebars.js
わりと簡単に実装できて、しっかり動きます。
デフォルトだとiPhoneでぬるっと動かないですが、CSSを追記するといいです。
使い方は以下で書いてます。
4 thoughts on “【jQuery】理想的なドロワーメニューの動きを実装できるプラグイン-Drawer-の使い方”
hambergerのスペルが間違っているようですー！
うあー！！間違ってましたぁぁぁ！！
ご指摘ありがとうございます！
修正しましたー。
Comments are closed.