”シンプル”なデザインを、”フツー”のWEBサイトを

これまでWordPressのテーマ作成についてダラダラと書いてきました。久々のWordPress以外の記事です。

先日、生業のとある仕事でドロワーメニューを実装する必要がありました。必要があった、というかドロワーメニューを実装したことがなかったので、やってみたかっただけなのですが。

で、色々と実装方法を探していたのですが、使い勝手の良さそうな、かつ簡単そうなものが意外と見つかりませんでした。そんな中、非常にシンプルで汎用性の高そうなプラグインのDrawerというのを見つけたので、今日はそれを紹介しようと思います。

jQueryプラグイン”Drawer”

まずは下記の公式サイトがデモにもなっているので見てみてください。

Drawer
Flexible drawer menu using jQuery, iScroll and CSS.

メニューボタンを押すと、横からメニューが出て来ます。非常にシンプルな形で、これぞ「ドロワーメニュー」といった感じです。

Drawerの実装方法

プラグインをダウンロードする

Drawer以外にiScrollというjQueryプラグインも必要なので、とりあえずこの2つをダウンロードします。両方ともGitHubから入手できるので、とりあえずzipファイルを丸ごと落とします。

Drawerは、「dist > js > drawer.min.js」「dist > css > drawer.min.css」の2つが必要なファイルとなります。

iScrollの方は、「build > iscroll.js」だけで大丈夫です。

jQuery本体と一緒に読み込む

jQueryの本体と一緒にこれらのjsとCSSを読み込みます。ちなみに、Drawerの方はCDNもあるのでそちらを使う場合は下記のように読み込んでください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>

jQuery部分

これでDrawerを動かす準備は整いましたので、最後にjQueryを動かすために下記を記述します。

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

とりあえずこれで動きます。ただ、このままでは×ボタンかメニュー以外の領域をクリックしないとメニューが閉じません。例えば、メニュー内にアンカーリンクを設置していた場合、アンカーリンクで目的の場所に飛んでもメニューが自動では閉じずに開きっぱなしのままになってしまうということです。

これはちょっと不恰好ですので、先ほどのjQuery部分を下記のようにします。

<script>
$(document).ready(function() {
$('.drawer').drawer();
$('.drawer-menu li').on('click', function() {
$('.drawer').drawer('close');
});
});
</script>

これで、メニューをクリックすればドロワーが自動で閉じるようになるはずです。

HTML

HTMLは下記のような形になります。

<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>
 
<nav class="drawer-nav">
  <ul class="drawer-menu">
    <li>メニュー</li>
    <li>メニュー</li>
    <li>メニュー</li>
  </ul>
</nav>

コンテンツ部分

bodyのdrawer–rightというクラスをdrawer–leftにすれば、ボタンが左側に表示されます。

後はCSSで見た目を調整すれば完成です。

DEMO

Drawerの公式には、他にも色々な動きをさせる方法が書かれているようなので、試してみるのも良いかも知れません。とりあえず僕は今回紹介したようなベーシックなもので充分満足しています。