ボタンをクリックすると横からスライドして現れるドロワーメニュー。特に最近のレスポンシブ対応ウェブサイトで多用されてきているので、もうお馴染みですね。

今日は、そんなドロワーメニューを実装する jQuery プラグイン［Drawer］の使い方を紹介します。

まずは動作サンプルですが、公式サイトの例に倣って実際に試してみました。

［Drawer］実装サンプル : https://on-ze.com/demo/jquery-drawer/

左上のアイコンをクリックするとメニューがスライドして表示されます。
もちろんレスポンシブデザインにも対応済み。表示されたメニューの高さがウィンドウの高さを超える場合は独立してスクロールします。

［Drawer］の使い方

公式サイト（http://git.blivesta.com/drawer/）にて導入方法が説明されていますが、以下で詳しく解説していきます。

必要なファイルを入手する

最初にファイルをダウンロードしたいところですが、この［Drawer］は必要なファイルがすべてCDNで配信・提供されています。

メインとなる「drawer.js」の他に、「jquery.js」と「iscroll.js」を利用することになります。また必須ではありませんがスタイルシートの「drawer.css」も配信されています。
すべて下記コードをHTMLに記述すればOKです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/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.1.3/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

各CDNによりデータが高速配信されるのでサイトの表示速度向上にも繋がります。ありがたいですね。制作者に感謝です。

もしパッケージ版が欲しい場合はGitHubから入手可能。URLは以下になります。

GitHub Drawer : https://github.com/blivesta/drawer/

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">
		<!-- コンテンツ -->
	</main>
</body>

カスタマイズする際のポイントは「なるべくクラス名を変えない」こと。
［Drawer］の挙動はスタイルシートの「drawer.css」にも紐づけられています。慣れないうちはデフォルトのクラス名のままで改変していくことをお勧めします。

JavaScriptで［Drawer］を起動させる

最後に下記JavaScriptのコードを記述して［Drawer］を有効化します。

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

以上、すべてコピペで導入できるので初心者の方でも充分に扱えるでしょう。

オプション設定について

各種イベントやメソッドも用意されているので、より高度なカスタマイズも可能になります。

イベント処理

メニューが開いたとき ↓

$('.drawer').on('drawer.opened', function(){ // ここに処理を記述 });

メニューが閉じたとき ↓

$('.drawer').on('drawer.closed', function(){ // ここに処理を記述 });

メソッド処理

Open（メニューを開く）↓

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

Close（メニューを閉じる）↓

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

Toggle（メニューが開いていたら閉じ、閉じていれば開く）↓

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

Destroy（機能を停止）↓

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

サポートブラウザについて

［Drawer］を使うにはブラウザがCSS3に対応している必要があります。

「Internet Exproler」はバージョン10以上が対象とのこと。

簡単に導入できるので是非お試しください。