【jQuery】「Drawer」を使って横から出てくるドロワーメニューを実装するには？？

2018.09.26

ドロワーメニュー

　以前「【jQuery】上からヌルヌル出てくるドロワーメニューを一から自作するには？？」にて上から出てくるドロワーメニューの実装方法についてはご紹介しましたが、今回はjQueryプラグインの「Drawer」を使って横から出てくるドロワーメニューの実装方法についてお話したいと思います！

1 Drawer公式サイトからファイルをダウンロード
2 iscrollのダウンロード
3 htmlファイルに必要なjsコードを記述
4 左から出てくるドロワーメニューの実装方法
5 右から出てくるドロワーメニューの実装方法
6 ハンバーガーボタンを画像で表示させたい場合は？
7 まとめ

Drawer公式サイトからファイルをダウンロード

　まず、必要なファイルをダウンロードするところから始めましょう。

「Drawer」公式サイトからDrawerファイルをダウンロードします。

ダウンロードしたzipフォルダを解凍し、解凍したフォルダを開くと以下のようなファイル一覧が表示されます。

この中の「dist」を開くと

上のように「css」と「js」のフォルダが置かれており、今回使うのは「css」フォルダの中にあるdrawer.cssと「js」フォルダの中にあるdrawer.jsになります！
（サイトを軽くしたい場合は、それぞれのフォルダにあるdrawer.min.cssとdrawer.min.jsを使えばよいのですが、改行がないファイルになるため慣れている人でないとオススメできません。。。）

iscrollのダウンロード

　続いてDrawerプラグインを動かすのに必要なiscrollファイルをダウンロードしましょう。

こちらはGithubにて配布されているので、こちらをダウンロードください！

ダウンロードしたzipフォルダを解凍すると

上のような構造になっており、この中の「build」フォルダに入っているiscroll.jsが今回使うファイルになります！

htmlファイルに必要なjsコードを記述

　では実際にこれらのファイルを使うためにhtmlファイルに以下のようにコードを記述しましょう。

<link rel="stylesheet" href="drawer.css">
<script src="iscroll.js"></script>
<script src="drawer.js"></script>

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

これにてjsの実装は完了しました！

なお、jQueryライブラリをまだ読み込んでいない場合は、以下のようにjQueryライブラリを読み込むコードを追記してあげましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link rel="stylesheet" href="drawer.css">
<script src="iscroll.js"></script>
<script src="drawer.js"></script>

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

では次から実際にドロワーメニューを実装する方法についてお話していきたいと思います！

左から出てくるドロワーメニューの実装方法

　まず左から出てくるドロワーメニューの実装方法についてお話します！

左から出てくるドロワーメニューというと、以下のような感じのことを言います。
デモページ

こちらを実装するには、<body>タグを以下のように書き換える必要があります。

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

そしてハンバーガーボタン(三本線のアレ)を実装するには以下のコードを、サイトでハンバーガーボタンを表示させたいところに記述しましょう。

<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><a href="#">メニュー1</a></li>
		<li><a href="#">メニュー2</a></li>
		<li><a href="#">メニュー3</a></li>
	</ul>
</nav>

以上のコードを記述することで、左から出てくるドロワーメニューを実装することができます！

あとはdrawer.cssを調整して、お好みのデザインにしていくとよいかと思います(^^)

右から出てくるドロワーメニューの実装方法

　続いて以下のデモページのように右から出てくるドロワーメニューを実装したいと思います！
デモページ

こちらを実装するには、<body>タグを以下のように書き換える必要があります。

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

では、drawer.cssにて三本線のものが表示されるようCSSが設定されています。

そのため、デモページのようにハンバーガーボタンを画像で表示させたい！といった場合には以下のようなコードに書き換える必要があります！

<button type="button" class="drawer-toggle ham-img"></button>

ham-imgは仮で設定したclass名なので、この部分はお好みのものにしていただけたらと思います！

そして、このham-imgに対して以下のようにCSSで背景画像としてハンバーガーボタンの画像を表示させるよう設定しましょう。

.ham-img {
	background: url(button.png) no-repeat;
	border: 0;
	height: 70px;
	padding: 0;
	width: 60px;
}

.drawer--left.drawer-open .ham-img {
    left: 17.25rem;
    position: absolute;
}

今回はbutton.pngという画像をハンバーガーボタンとして表示させたかったため、上のような記述になりましたが、heightやwidthは用意した画像の数値を当てはめていただけたらと思います！

まとめ

　以上が簡単ではありますがjQueryプラグイン「Drawer」の実装方法でした！

左からも右からも出すことが比較的簡単にできる…というのはなかなか重宝できるプラグインだと思いますので、是非とも横から出てくるドロワーメニューを実装することがありましたらご利用してみてください(^-^)