ハンバーガーボタンを簡単に設置！Drawer.jsを使って初心者でもクオリティの高いメニューを導入しよう

以前のハンバーガーボタンは自作でしたので足りない点や動きの悪い点もあったかもしれません…
またどうしてもブログに合わせてカスタマイズが必要になる場合が多そうでした…そうなると、CSS初心者だったらどうにかできますが、全くの素人さんですと難しい点もあったかと思います。
一応完全コピペでできるよう追記もしたのでよろしければこちら：簡単コピペで「動くハンバーガーボタン」を設置！はてブにも使えるカテゴリーをドロワーメニューにカスタマイズ★ - misallychan.com

が、今回は！どんな初心者でも簡単に設置できるハンバーガーボタン・ドロワーメニューです。
しかも、とっても理想的な動きをしてくれます。

（ただ、HTMLをbodyから書き換える必要がありますので、はてなブログで使えるかは試しておりません。。あしからず。
はてなブログの方はぜひ前回のブログを参考になさってください。）

f:id:misallychan:20170726152238p:plain

Drawer.jsを使おう
使い方
ドロップダウンメニューの設置
- 最初の読み込み部分に以下を追加
- HTMLを書き換え
ちょっとカスタマイズが難しかった点
- jQeury mobileとの整合性
まとめ

Drawer.jsを使おう

今回使うのはDrawer.jsというプラグインです。

どんな動きをするか？デモ

git.blivesta.com

このページの左上にあるのがハンバーガーボタン。
押すとページ全体がオーバーレイし、メニューが出てきてくれます。
ボタンは固定されていますが、メニューが出ると閉じるボタンに変わります。
しかもメニューにはドロップダウンのものもあり、使い勝手も良い。

これ、本当に理想的じゃないですか？

メリット１：ボタンの位置やメニューの動きもデフォルトでたくさん選べる

左に設置、右に設置、なども自分でカスタマイズせずともデフォルトで選べます。
以下のようなこともできますよ。

メリット２：レスポンシブにぴったり

スマホにはぴったりのハンバーガーボタンですが、PCではハンバーガーボタンのほうがおしゃれなときと、PCだとわかりにくいときもありますよね。
そんなとき、PCとスマホでメニューを切り替えることもできます。しかもデフォルトで。

Drawer - Flexible drawer menu using jQuery, iScroll and CSS.
このページのメニューから
Navbar、FixedNavbar、Sidebar
これらどれかを選べば、PCではメニューが開かれた状態で表示することができます。
PCだと上左右いずれかに開かれたナビバーが表示され、ブレイクポイントでハンバーガーメニューに切り替わります。

■PC版
f:id:misallychan:20170726170251p:plain

■スマホ版
f:id:misallychan:20170726170307p:plain

メリット３：メニュー内のスクロールもスムーズ

自作すると結構難しいこの部分。
メインコンテンツがオーバーレイでグレーアウト？されてスクロールもできなくなり、現れたメニュー部分が重なりメニュー数が多くてもスクロールできる。

全体をオーバーレイ領域で指定するまでは良いのですが、固定ヘッダでメニュー部分をスクロールさせるのってなんだかうまくいかないことも多いので、それが何も苦労せず完成するなんて、なんて楽なんだと思います。

メリット４：ドロップダウンメニューもかんたんに

これも自作すると結構面倒です。jQueryとか理解してないと難しいと思います。

どれどれをクリックした際にこれが開いて、、、他のものをクリックした際に全部閉じて該当するものだけ開いて、、、とか、ややこしかったりするんですが、これがjsを読み込んでclassを指定するだけで簡単にできます。

メリット５：ダウンロードの必要がない

CDNがありますのでいちいちダウンロードして必要なファイルのみをアップロード・・・なんて必要もありません。

使い方

先程もお伝えしましたように、CDNがあるので便利です。

最初に読み込み

<!-- 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>

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>

デフォルトだとこんな感じです。

例えばレスポンシブなメニューを作りたい場合は、

<body class="drawer drawer--right">
  <header class="drawer-navbar " role="banner">
    <div class="drawer-container">
      <div class="drawer-navbar-header">
        <a class="drawer-brand" href="#">Drawer</a>
        <button type="button" class="drawer-toggle drawer-hamburger">
          <span class="sr-only">toggle navigation</span>
          <span class="drawer-hamburger-icon"></span>
        </button>
      </div>
      <nav class="drawer-nav" role="navigation">
        <ul class="drawer-menu drawer-menu--right">
          <li><a class="drawer-menu-item" href="#">Nav1</a></li>
          <li><a class="drawer-menu-item" href="#">Nav2</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>

こんな感じになります。
詳細はこちら：http://git.blivesta.com/drawer/navbar/right/

理想の動きをするものを選ぶと、そのページに設置方法が詳しく載っていますよ。

jQuery

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

以上で使うことができます！！が、更に。

ドロップダウンメニューの設置

ドロップダウンメニューとは、最初は閉じてあって、クリックするとびろーんと開いてまた細かなメニューが出て来るもの。
メニューが多いけど、子カテゴリはしまっておきたい、なんてときにも便利です。

最初の読み込み部分に以下を追加

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTMLを書き換え

先程のHTMLのの中にありますul部分を以下のように書き換えます。

<ul class="drawer-menu">
  <li><a class="drawer-menu-item" href="#">通常のリスト</a></li>
<li><a class="drawer-menu-item" href="#">通常のリスト</a></li>


  <li class="drawer-dropdown">
    <a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
      クリックでドロップダウンさせたいリスト <span class="drawer-caret"></span>
    </a>
    <ul class="drawer-dropdown-menu">
      <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav1</a></li>
      <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav2</a></li>
      <li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav3</a></li>
    </ul>
  </li>
</ul>

ドロップダウンさせたいリストには上記のようにclassを追加し、その中にドロップダウンで表示した中身のulを書き込めば良いのですね！

いやあ・・・なんとも簡単です。。。

ちょっとカスタマイズが難しかった点

色々カスタマイズもできて便利ではあるんですが、もともとかっちり作られているので動作や表示を変えるのはちょっと面倒でした。
なのでデフォルトの動作に合わせてデザインを考えるのがおすすめです。

知識のない私がどうしてもカスタマイズできなかったのが、bodyタグにしか反応してくれなかった点。
bodyにclassを追加するんですが、bodyに設置するのが嫌で、その中のdivにclassを追加しても反応してくれませんでした。。どうしたらよかったんやろ、メソッドとか使いこなせればよかったのかな。。
というわけで、はてなブログでこれを使うのは難しいかもしれません。やってないからわからないのですが。。。

あとはアニメーションが色々ついているので、通常はtopに固定されているボタンの位置をズラしたいときにも苦労します。
fixedなので親の位置とか関係なくなっちゃうんですよね。absoluteにも変更できますが。

jQeury mobileとの整合性

あとは、もともとボタンデザインなどが作られてしまっているjQuery mobileを入れてしまっていると、デザインはもちろんアニメーションまでうまくいかない部分が多いです。
なのでCSSをある程度リセットしてあげると良いでしょう。

また、リンクで遷移した際にハンバーガーボタンが消えてしまう事象が発生しました。
条件としまして、「開かれたドロワーメニュー内の、ドロップダウンのリンクから遷移した場合のみ」
現象は「button部分だけ表示されない、消えてしまう」原因は「fixedだから？ドロップダウンだから？アニメーションのせいで表示されていない？ちょっとよくわからない」

修正ポイントとしまして、

①jqmをCSSでリセットしておく

　一般的なりセットcssと、jqmで書き換えられていたbutton部分のborder-radiusを0にしたり、大きさを正方形に整えたりすれば良さそうです。

②contentsの外にheaderとbuttonを吐き出す

　効果があるのかは謎。

③drawer.cssのアニメーションを書き換える

　一応これは効果あり。

.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{width:100%;height:2px;/*-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);*/background-color:#fff}