Drawer.jsを使ってハンバーガーメニューを作る

普段はJSやJQueryでハンバーガーメニューを作っていますが
Drawer.jsというプラグインで簡単に作ることができるんだとか。

[Drawer.js](https://git.blivesta.com/drawer/)

ただ、このプラグインを使った解説記事はほとんど公式と同じデザインで
ハンバーガーを開いたメニュー内のカスタマイズの記事があまりなかったこともあり、
私的に実装したい形にカスタマイズをしてみた備忘録になります。

## 前提
ダウンロードの方法は色々。

- プラグインはダウンロードして開発環境のjsディレクトリに入れる
- cdnで読み込む
- npmで入れる（webpack管理）

プラグイン系は上記の方法で入れれますが、手順などは割愛します。
(cdnの書き方は公式サイトに載っているので..!)

そしてデフォルトの実装はこんな感じです↓
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEjEbjw" data-user="orange2929" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/orange2929/pen/ZEjEbjw">
  Drawer.js（デフォルト）</a> by aya (<a href="https://codepen.io/orange2929">@orange2929</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## カスタマイズしてみる

カスタマイズ後のハンバーガーメニューはこちら。
HtmlやJSは基本的にデフォルトから大きく変えてはいないです。
強いていうならメニュー内にアコーディオンを追加しています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyjyYwX" data-user="orange2929" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/orange2929/pen/dyjyYwX">
  Drawer.js（メニューカスタマイズ）</a> by aya (<a href="https://codepen.io/orange2929">@orange2929</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ガッツリ触ったのは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>
```

1. bodyに対して`drawer`と`drawer--left`もしくは`drawer--right`、`drawer--top`のクラスをつけます。
2. ハンバーガーメニューの部位になるheaderに`role=banner"`をつけます。
2. `button`で括られているところがハンバーガーメニューのアイコンの部分になります。ここは動きの関係もあるのでデフォルトのままにします。
2. navタグには`<nav class="drawer-nav　drawer-close" role="navigation">`を入れます。
2. 一番気をつけたいのがこの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はヘッダー固定にも対応できるみたいなので
機会があれば今後も使ってみたい限りです👀