普段はJSやJQueryでハンバーガーメニューを作っていますが
Drawer.jsというプラグインで簡単に作ることができるんだとか。
ただ、このプラグインを使った解説記事はほとんど公式と同じデザインで
ハンバーガーを開いたメニュー内のカスタマイズの記事があまりなかったこともあり、
私的に実装したい形にカスタマイズをしてみた備忘録になります。
前提
ダウンロードの方法は色々。
- プラグインはダウンロードして開発環境のjsディレクトリに入れる
- cdnで読み込む
- npmで入れる（webpack管理）
プラグイン系は上記の方法で入れれますが、手順などは割愛します。
(cdnの書き方は公式サイトに載っているので..!)
そしてデフォルトの実装はこんな感じです↓
See the Pen Drawer.js（デフォルト） by aya (@orange2929) on CodePen.
カスタマイズしてみる
カスタマイズ後のハンバーガーメニューはこちら。
HtmlやJSは基本的にデフォルトから大きく変えてはいないです。
強いていうならメニュー内にアコーディオンを追加しています。
See the Pen Drawer.js（メニューカスタマイズ） by aya (@orange2929) on CodePen.
ガッツリ触ったのはCss。
JS
$(document).ready(function() {
$('.drawer').drawer();
});
公式のまま入れています。
別のクラスで動かせるかと思ったのですが、このdrawerというクラスで発火するみたいで
このクラスは変更・削除しない方が良いです。
Html
続いてHtml側での記述と追加点
<body class="drawer drawer--right">
<header class="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 drawer-close" role="navigation">
<ul class="header-menu">
<li><a class="header-logo" href="#">LOGO</a></li>
<li><a class="drawer-menu-item" href="#">コンテンツ1</a></li>
<li><a class="drawer-menu-item" href="#">コンテンツ2</a></li>
<li><a class="drawer-menu-item" href="#">コンテンツ3</a></li>
</ul>
</nav>
</header>
<main>
<!-- ここからページの内容 -->
</main>
</body>
- bodyに対して
drawerとdrawer--leftもしくはdrawer--right、drawer--topのクラスをつけます。 - ハンバーガーメニューの部位になるheaderに
role=banner"をつけます。 -
buttonで括られているところがハンバーガーメニューのアイコンの部分になります。ここは動きの関係もあるのでデフォルトのままにします。 - navタグには
<nav class="drawer-nav drawer-close" role="navigation">を入れます。 - 一番気をつけたいのがこのnavの中。nav下にdivを入れようとするとメニューが反応しなかったのでulタグで入れるしかなさそうです。
Css
レイアウト調整時の注意点は主に以下のクラス名で調整すること
ハンバーガーのアイコン
線の太さやサイズ感など
.drawer-hamburger
.drawer-hamburger-icon
メニューの位置関係
ハンバーガーアイコンの位置
.drawer--right
.drawer--left
.drawer--top
positionで調整します
メニュー内の背景周り
.drawer-nav
今回.drawer--right.drawer-open .drawer-navのクラスに
width:100%をかけて背景を全面に引いてますが、
この指定位置を間違えるとメニューを閉じた際に中途半端な位置に来てしまい
内容が見えてしまうという事例がありましたので作り方によっては注意が必要そうです。
使ってみた感想
JSで全てやろうとすると結構面倒なことになりがちだったので
そういった場合はプラグイン活用していくのが良いなぁと思いました。
Drawer.jsはヘッダー固定にも対応できるみたいなので
機会があれば今後も使ってみたい限りです👀