実案件で「Slidebars.js」というドロワーメニューのプラグインを使う機会があったのでその使い方と、
そのままでは動きがイマイチだったところがあるので、気持ちいい動きになるようにしてみました。

こちらが公式サイトです。

Slidebars.js

デモ

けっこういろんなブログで紹介されてて、確かに簡単に実装できていいんですが、
iOSではドロワーメニューを開いて、メニューをスクロールすると滑らかじゃないんです。

スクロールしてもピタッと止まる感じ。

でも、ほんのちょっとCSSに追記すれば滑らかにすることができます。

以下のデモサイトをスマホ（できればiPhone）でメニューを開いてスクロールしてみてください。
左側のドロワーメニューはデフォルト、右側のドロワーメニューはCSSを追記したものです。

デモサイト

PCでも動作はしますが、何がどう違うかは分からないと思います。

ダウンロード

以下のリンク先にあるダンロードボタンをクリックしてください。

ダウンロード

zipファイルをダウンロードできるので、解凍してください。

読み込み

解凍したフォルダの「dist」ディレクトリ以下にある「slidebars.min.css」と「slidebars.min.js」を読み込みます。

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

HTML

全体的な構造は以下のようにします。

<!-- 開閉ボタン -->
<div class="menu sb-toggle-right"><a href="">MENU</a></div>
<!-- メインコンテンツ -->
<div id="sb-site">
</div>
<!-- ドロワーメニューのところ -->
<div class="sb-slidebar sb-right">
  <div class="sb-right-inner">
  </div>
</div>

開閉ボタンやドロワーメニューの箇所についているclassの「right」を「left」にすると左から出てくるドロワーメニューになります。

jQuery

jQueryには以下を書くだけで動きます。

$.slidebars();

オプション

オプションもいくつか用意されています。

var mySlidebar = new $.slidebars({
  // メニューが開いているとき、コンテンツ部分をタッチしたら閉じる
  siteClose: true,
  // 指定したpx以上でドロワーメニューを開かなくする
  disableOver: 480,
  // disableOverで指定したサイズ以上にすると
  // ドロワーメニューの開閉ボタンが非表示に
  hideControlClasses: true,
  // メニューを開いているときに、
  // コンテンツがスクロールしないように固定してくれる
  scrollLock: true
});

scrollLockなんかはtrueにしておくと便利ですね。

CSS

CSSに関しては必須のものはありませんが、冒頭で書いた通りiOSで滑らかに動かすための記述があります。

「-webkit-overflow-scrolling」を使うことでスクロールが滑らかになります。

/* サイドバー */
.sb-slidebar.sb-right {
  -webkit-overflow-scrolling: touch;
}
.sb-right-inner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

また、「-webkit-overflow-scrolling」を指定した中に要素を追加して、その要素には「overflow-y: auto;」を指定します。

「overflow-y: auto;」がなくてもうまく動くように見えるんですが、ドロワーメニューを下にスクロールしまくると、そのうちコンテンツ部分がスクロールを始めてしまいます。

この問題に関しては以下を参考にしました。

-webkit-overflow-scrollingを指定するときについでにやっておいた方がいいこと

さいごに

ドロワーメニューにはいろいろプラグインがありますが、「Slidebars.js」は比較的簡単に導入できるかなという印象でした。

ただ、そのままではイマイチな動きもあるので、ちょっと工夫が必要そうです。