横からスライドして表示されるメニューを実装できるjQueryプラグイン「Drawer」

Drawerは、横からスライドして表示されるメニューを実装することができるjQueryプラグインです。

デモは以下ページでご確認いただけます。

Drawerの使い方

ステップ1. 必要なファイルの読み込み

まずは、必要なCSSファイルとJSファイルを読み込みます。すべてCDN経由で配信されていますが、ファイルを自サーバーに設置したい場合は、GitHubからダウンロードしましょう。


<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<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>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

記述する場所は<head>～</head>内ですが、JSファイルは</body>の直前でもOKです。

ステップ2. 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">
  <!-- Page content -->
 </main>
</body>

button要素がハンバーガーボタンで、navの中身がメニューとして表示されます。

クラスは変えずにそのまま記述するようにしましょう。

ステップ3. Drawerの呼び出し

最後に、Drawerを呼び出せば、スライドして表示されるメニューが機能します。


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

Drawerのオプション

以下のようにオプションを追加することもできます。


<script>
$('.drawer').drawer({
 class: {
 nav: 'drawer-nav',
 toggle: 'drawer-toggle',
 overlay: 'drawer-overlay',
 open: 'drawer-open',
 close: 'drawer-close',
 dropdown: 'drawer-dropdown'
 },
 iscroll: {
 // Configuring the iScroll
 // https://github.com/cubiq/iscroll#configuring-the-iscroll
 mouseWheel: true,
 preventDefault: false
 },
 showOverlay: true
});
</script>

メニューが開いた時、もしくは閉じた時に何か処理を行いたい場合は、以下のように処理を追加します。


<script>
$(document).ready(function() {
 $('.drawer').drawer();
 $('.drawer').on('drawer.opened', function(){ ここに処理を記述 });
 $('.drawer').on('drawer.closed', function(){ ここに処理を記述 });
});
</script>

長いメニューが途中で切れてしまう場合

メニューが長くなって、画面からはみ出す部分が切れてしまう場合は、CSSに以下を追加します。


.drawer-nav {
overflow: scroll;
}

上記を追加することで、メニュー内でのスクロールが可能になります。

あとがき

簡単にハンバーガーボタンとスライド表示するメニューが実装できますね。

ハンバーガーメニューをサクッと導入したい場合は、ぜひDrawerの活用をご検討ください。