簡単にドロワーメニューを実装できるDrawer.js
レスポンシブデザインが当たり前のようになってきたここ数年。ユーザーによってサイトやページの閲覧環境がこれだけ違ってくれば、まあ当然の流れだと思います。
今回紹介するDrawer.jsは、その名の通りドロワーメニューを実装するためのjavascriptライブラリです。レスポンシブデザインではメニューの置き方、見せ方に悩むことがよくあると思いますが、このDrawer.jsをつかえばゴチャゴチャしがちなメニュー周りを簡単にスッキリまとめることができます。また、非常にシンプルなデザイン、動きなのでどんなデザインにも合うのではないでしょうか。
Drawer.jsを実装するために必要なファイル
このDrawer.jsはjQueryをつかって実装しますが、それ以外につかうファイルは下記になります。
- drawer.min.css
- iscroll.min.js
- drawer.min.js
公式サイトからもダウンロードできますが、どのファイルもCDN配信されているのですぐに使いたい場合は下記を記述すれば大丈夫です。
<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>公式サイトは下記です。
実装方法
body
<body>には下記のように記述します。
<!--メニューが左側の場合-->
<body class="drawer drawer--left">
<!--メニューが右側の場合-->
<body class="drawer drawer--left">トグルボタン
次に下記を記述します。記述場所はドロワーメニューにしたい<nav>の上で良いかと。
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>メニューの中身
基本は次のような形になりますが、ここは設計に合わせて好きなようにカスタマイズします。ただ、class名等はいじらない方が良いです。
<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>javascript
最後にjavascriptを記述します。
このDrawer.jsを紹介しているほとんどの記事は下記のように書いています。
<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>もちろんこれでも動作するのですが、ページ内リンクで遷移した場合、遷移が終わってもメニューが展開されたままになってしまいます。
これでは少し不格好なので、僕はいつも下記のように記述しています。
<script>
$(document).ready(function() {
$('.drawer').drawer();
$('.drawer-menu li').on('click', function() {
$('.drawer').drawer('close');
});
});
</script>
