【jQuery】簡単にドロワーメニューを実装できる「Drawer」の使い方
jQueryプラグイン「Drawer」の使い方をご紹介します。
スマホサイト等でよく見かける「」ボタンをクリックすると横からスライドして現れるドロワーメニューです。
DEMOページを作成しました。
Drawerのダウンロード方法
下記の公式サイトのリンクから、DrawerのjsファイルとCSSファイル、iScrollというjsファイルをダウンロードします。
Drawer – Flexible drawer menu using jQuery, iScroll and CSS.
ちなみに、必要なファイルはCDNでも用意されていますので、下記のコードを読み込むとすぐに使用することができます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
drawerのダウンロード
GitHub – blivesta/drawer: Flexible drawer menu using jQuery, iScroll and CSS.
ダウンロードしたzipファイルを解凍し、その中の「dist」フォルダ内にあるCSSファイルとJSファイルを使用します。
iscrollのダウンロード
GitHub – cubiq/iscroll: Smooth scrolling for the web
ダウンロードしたzipファイルを解凍し、その中の「build」フォルダ内にある「iscroll.js」というファイルを使用します。
Drawerの実装方法
<link rel="stylesheet" href="drawer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/drawer.min.js"></script>
HTMLのマークアップ
bodyタグに下記のclassを記述します。
<body class="drawer drawer--left">
「drawer—left」と書くと左側からドロワーメニューが表示されます。「drawer—right」で右側から。
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
「」ボタンを表示するためのHTMLです。
<nav class="drawer-nav">
<ul class="drawer-menu">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
ドロワーメニューの中身はこのように書いています。
<script>
$(function() {
$('.drawer').drawer();
});
</script>
最後にDrawerを動かすために、上記のjQueryのコードを記述します。
ドロワーメニュー「Drawer」の実装方法は以上です。
とても簡単に使えて、動きも良い感じなのでオススメのプラグインです。