jQueryプラグイン
Pocket

2015/11/29
プラグイン作者の方よりv3.1.0へアップデートのご連絡をいただいたため記事の更新をしました。
ご連絡ありがとうございます!

drawer-new

なかなか思ったようなプラグインがないドロワーメニューですが、
このDrawerというプラグインは簡単に理想的なドロワーメニューを実装してくれます。

今回のアップデートではバグ潰しと機能の整理をされたそうです。

また、class名やマークアップも若干変わってるので、
すでに使ってる人も要チェックです。

お気に入りのプラグインなのでアプデありがたいです。
デザインもシンプルでかっこいい!

目次
  1. 理想のドロワーメニュー/デモサイト
  2. ダウンロード
  3. 読み込み
  4. jQueryの記述
  5. cssの記述
  6. HTMLの記述
  7. プルダウンの多階層メニュー
  8. イベントやメソッドなど
  9. 類似プラグイン

理想のドロワーメニュー

こんなドロワーメニューのプラグインあったらいいなーと思ってました。

  • ハンバーガーメニューをタップすると横からメニューがでてくる。
  • メニューが出てる間はハンバーガーメニューが×ボタンに変わる
  • 横からでてきたメニューは、独立してスクロールできる
  • ×ボタンやメニュー領域以外をタップすると閉じる。

これらを簡単に実装できるのが
「Drawer」。そのまんまです。

デモサイト

横からシュッと出てくるドロワーメニューの実装例ですが、他のパターンも後ほど紹介します。

ダウンロード

Drawer

まずはこのプラグインそのものをダウンロードしてきます。

Drawer

Drawerのサイトから「Download on GitHub」と書かれたボタンがあるのでクリック、
GitHubのページの右下辺りにある「Download zip」をクリックしダウンロード。
zipファイルを解凍します。

また、CDNも用意されています。

CDN

iScroll

このプラグインはメニュー部分のスクロールをiScrollというプラグインで動かしています。なのでiScrollもダウンロードしておきます。

iScroll

iScrollはダウンロードしてきたファイル一式の中にある「build」ディレクトリ内のiscroll.jsを使えば大丈夫です。

読み込み

headタグ内にjqueryとiScrollを読み込んでおきます。パスは自分の環境に合わせてやってください。

<script src="jquery.min.js"></script>
<script src="iscroll.js"></script>

そして、Drawerのjsファイルとcssファイルを読み込みます。

jsフィイルは、ダウンロードファイルから「dist」→「js」とディレクトリをたどればあります。
CSSファイルは「dist」→「css」ディレクトリの中です。

<link rel="stylesheet" href="drawer.min.css">
<script src="drawer.min.js"></script>

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

これだけです。

$(document).ready(function() {
  $(".drawer").drawer();
});

css

cssは必須のものはありません。

メニューのデザインを好みに変えるだけなので、
navやulについてるclassを上手く使ってデザインカスタマイズしてください。

HTML

HTMLでタグにつけるclassを変更することでいろんなパターンを実装できます。
よく使いそうなものを抜粋してデモサイトを作ってみました。

demo1:ドロワーメニュー基本形

ハンバーガーメニューをクリックすると横からシュッと出てくる基本形です。

デモサイト1

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>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</nav>

<section>
<!-- コンテンツ部分 -->
</section>

</body>

これをコピペして、ドロワーメニューの中身と
コンテンツ部分を書き換えれば形にはなると思います。

bodyタグにdrawer–rightクラスを指定してますが、drawer–leftにすれば、
左から出てくるようになります。

demo2:上からシュッと出てくるやつ

これは基本形のbodyタグのclassを変えるだけです。
上からシュッと出てきます。

デモサイト2

<body class="drawer drawer--top">
<!-- 省略 -->
</body>

bodyのclassをdrawer–topにすると上から出てくるドロワーメニューになります。

demo3:サイドに固定されてるメニュー

最近よくみるUIなんですが、サイドに固定されてるメニューがあって、
メニューエリアとコンテンツエリアがそれぞれ独立してスクロールするようなものです。

デモサイト3

縮めるとハンバーガーメニューが出てきてドロワーメニューに変わります。

<body class="drawer drawer--left drawer--sidebar">

<!-- ハンバーガーボタン -->
<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>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</nav>

<section class="drawer-contents">
<!-- コンテンツ部分 -->
</section>

</body>

まずbodyのclassに「drawer–sidebar」を追加します。

そしてコンテンツ部分にあたるタグのclassにはdrawer-contentsをつけます。
これをつけないとサイドメニューのエリアを無視した横幅になってしまいます。

3つ紹介しましたが、それぞれclassを変えるだけでいろんなパターンを実装できるので、
いろいろと試してみてください。

プルダウンの多階層メニュー

先ほどのデモサイトでもプルダウンメニューを実装してますが、
これもDrawerに少し記述を追加するだけでできます。

まずはBootstrapのドロップダウンを読み込みます。

<script src="https://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.5/dropdown.min.js"></script>

そして、プルダウンにしたいところをこんな感じにします。

<ul>
  <li>リスト1</li>
  <!-- 省略 -->
  <li class="drawer-dropdown">
    <a href="#" data-toggle="dropdown">リスト9(プルダウン)</a>
      <ul class="drawer-dropdown-menu">
        <li>リスト9-1</li>
        <li>リスト9-2</li>
        <li>リスト9-3</li>
      </ul>
  </li>
  <!-- 省略 -->
  <li>リスト14</li>
</ul>

こうするとプルダウンの多階層メニューも実装できます。

イベントやメソッドなど

イベントやメソッドもあるので、プルダウンが開いたらこうしたいとかあれば追加できます。

イベント

メニューが開いたとき

$('.drawer').on('drawer.opened', function(){
  console.log("開きました");
});

メニューが閉じたとき

$('.drawer').on('drawer.closed', function(){
  console.log("閉じました");
});

メソッド

メソッドも必要に応じて使えます。

// メニューを開く
$('.drawer').drawer('open');
// メニューを閉じる
$('.drawer').drawer('close');
// 開いてたら閉じて、閉じてたら開く
$('.drawer').drawer('toggle');
// ドロワーメニューの機能停止
$('.drawer').drawer('destroy');

条件とか追加して、開いたり閉じたりするタイミングをコントロールできそうですね。

まとめ

簡単に使えて、本格的なドロワーメニューを実装できる上に、動きも綺麗。
申し分ないぐらいオススメなプラグインです。

他にも実装例はDrawerのサイトに書かれているので、ぜひ参考にしてみてください。

Drawer

類似プラグイン

hiraku.js

アクセシビリティ対応のドロワーメニューです。また、Drawerと同様、メニューを開いてる時にスクロール固定、メニューはスクロールという仕様ですが、CSSでやってるので若干動きが微妙なところがあります。

ただ、すごく細かい所なので、気にならなければ、すごくいいプラグインだと思います。

【jQuery】アクセシビリティ対応のドロワーメニュー-hiraku.js-を使ってみた

Slidebars.js

わりと簡単に実装できて、しっかり動きます。

デフォルトだとiPhoneでぬるっと動かないですが、CSSを追記するといいです。

使い方は以下で書いてます。

【jQuery】簡単に使えるドロワーメニューSlidebars.jsの使い方と、もうちょい気持ちいい動きにしてみた

Pocket

カテゴリー: タグ:

5 thoughts on “【jQuery】理想的なドロワーメニューの動きを実装できるプラグイン-Drawer-の使い方

  1. Yuka より:

    hambergerのスペルが間違っているようですー!

    1. mismith より:

      うあー!!間違ってましたぁぁぁ!!
      ご指摘ありがとうございます!

      修正しましたー。

ただいまコメントは受け付けていません。