【jQuery】簡単に使えるドロワーメニューSlidebars.jsの使い方と、もうちょい気持ちいい動きにしてみた
実案件で「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」は比較的簡単に導入できるかなという印象でした。
ただ、そのままではイマイチな動きもあるので、ちょっと工夫が必要そうです。