軽量!Slidebars.jsの使い方~スマホでスライドするドロワーメニュー
2019/04/08
スマホでスライドして表示するドロワーメニュー、jQueryプラグイン「Slidebars」の使い方、設置方法です。
ドロワーメニューのjsはいろいろありますが、このSlidebars.jsが簡単に設置でき、しかもjsファイルサイズは1k程度と軽量なのでページの表示の負荷も軽いです。設置にはほかにjqueryとcssが必要です。
それではまずは
サンプルデモ
公式サイトから必要ファイルをダウンロード
http://plugins.adchsm.me/slidebars/
追記:
※このページに記載されている内容はバージョン0.10.3です。最新のバージョンとは違っていますので注意してください。
バージョン2の基本的な設定方法をまとめました。
⇒Slidebars.js【Ver2】の使い方、設定方法~バージョンが変わってます
Slidebarsの使い方、設定方法
jQueryとSlidebarsよりダウンロードしたファイルのdistのフォルダからslidebars.min.jsとslidebars.min.cssを読み込みます。minファイルは圧縮版なのでこちらで大丈夫です。
<link rel="stylesheet" href="css/slidebars.min.css">
<script src="js/jquery.js"></script>
<script src="js/slidebars.min.js"></script>
Viewportの設定
レスポンシブ対応のためヘッダでViewportの設定を記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
コンテンツ部分の記述内容
右からスライド表示させる場合の記述例です。
<body>
<div id="sb-site">
<!--ここにページのコンテンツ内容-->
<div class="sb-toggle-right">MENU</div>
</div>
<div class="sb-slidebar sb-right">
<!--ここに右からスライドしてくるコンテンツ内容-->
</div>
</body>
次から詳しく説明します。
1.設置するページのコンテンツを内包する
ページのすべてのコンテンツを#sb-siteで内包します。idを変更すると動作しません。
<div id="sb-site">
ここにページのコンテンツ
</div>
2.スライドさせたいコンテンツを記述する
スライドして出したいコンテンツの内容は.sb-slidebarで内包します。classを変更すると動作しません。右からスライドさせたい場合は.sb-rightを追加します。これを#sb-siteの外に書きます。#sb-siteの中に書くとうまく動作しない場合があります。
<div id="sb-site">
ここにページのコンテンツ
</div>
<div class="sb-slidebar sb-right">
ここにスライドして出てくるコンテンツ
</div>
左からスライドさせたい場合は、sb-rightをsb-leftに変更します。
<div id="sb-site">
ここにページのコンテンツ
</div>
<div class="sb-slidebar sb-left">
ここにスライドして出てくるコンテンツ
</div>
そのほか.sb-slidebarに追加するclassによって動作を変更できます。.sb-left、.sb-rightにさらに追加するかたちで設定します。
例:class=”sb-slidebar sb-left sb-style-push”
- .sb-static コンテンツを固定したい場合に追加
- .sb-style-push 開いたときに全体のコンテンツを寄せたい場合に追加
- .sb-style-overlay 元のコンテンツの上にスライドバーを重ねて表示したい場合に追加
- .sb-width-thin 出てくるスライドバーの幅が15%狭くなります。※slidebars.min.cssで指定されています。
- .sb-width-wide 出てくるスライドバーの幅が15%広くなります。※slidebars.min.cssで指定されています。
- .sb-width-custom 出てくるスライドバーの幅を指定できる。下で詳細説明
- .sb-momentum-scrolling iOSで慣性スクロールできるようになります。-webkit-overflow-scrolling:touchが設定される。※slidebars.min.cssで指定されています。
表示くずれが起きる場合は、.sb-style-push、.sb-style-overlayを設定すると解決できることが多いです。スライド幅指定はCSSでした方がいいと思います。
.sb-width-customの設定方法
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="15%">
<!-- Your left Slidebar content. -->
</div>
data-sb-widthに横幅を設定すると、指定した横幅で表示できます。px等でも指定可。※幅はCSSでも指定できます。
3.スライドさせたいコンテンツの制御
スライドを出し入れするMENUボタンを追加します。設置したい場所に記述します。ここもclassによって動作を変更できます。
<div class="sb-toggle-left">MENU</div>
- .sb-toggle-left クリックでスライドバーが開閉します。.sb-leftに連動します。※.sb-leftがないと動作しません。
- .sb-toggle-right クリックでスライドバーが開閉します。.sb-rightに連動します。※.sb-rightがないと動作しません。
- .sb-open-left クリックでスライドバーが開きます。.sb-leftに連動します。※.sb-leftがないと動作しません。
- .sb-open-right クリックでスライドバーが開きます。.sb-rightに連動します。※.sb-rightがないと動作しません。
- .sb-close クリックで開いているスライドバーを閉じます。
メニューボタンを1つだけ設置する場合は.sb-toggle-left、.sb-toggle-rightで問題ないと思います。
スライドバーを画面100%に表示させる場合や、出てきたスライドバーに閉じるボタンを設置する場合は.sb-open-left、.sb-open-rightをメニューボタンに記述して、閉じるボタンに.sb-closeを指定して使います。
Slidebars実行スクリプト
最後にスクリプトを動作させるコードをページ内に記述します。どこに書いても大丈夫です。
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
オプション設定
ここでもオプション設定ができます。
<script>
(function($) {
$(document).ready(function() {
$.slidebars({
siteClose: true, // true or false
disableOver: 480, // integer or false
hideControlClasses: true, // true or false
scrollLock: false // true or false
});
});
}) (jQuery);
</script>
- siteClose 画面上をクリックすることで、スライドバーを閉じることができます。デフォルトはtrue
- disableOver 指定した画面幅以上でスライドバーを開かなくする。デフォルトはfalse
- hideControlClasses disableOverで指定した幅以上になると開閉ボタンが非表示になる。disableOverが有効のときのみ。デフォルトはfalse
- scrollLock スライドバーが開いているときにコンテンツをスクロールさせない。デフォルトはfalse
※scrollLockはバグのようでこのままでは動作しないようです。CSSの修正が必要です。ページ最後で追記しています。
サンプルコードの全文
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/slidebars.min.css">
<script src="js/jquery.js"></script>
<script src="js/slidebars.min.js"></script>
</head>
<body>
<div id="sb-site">
<!--ここにページのコンテンツ内容-->
<div class="sb-toggle-left">MENU</div>
</div>
<div class="sb-slidebar sb-left">
<!--ここに左からスライドしてくるコンテンツ内容-->
</div>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>
追記:scrollLockが効かない
2016.4.4時点で、スクリプトのオプションの「scrollLock」が動作しなかったので調べてみましたら以下の記事がありました。
動作しないと作者へコメントされており、対処法も書かれています。
scrollLock is not working. (And I have two scrollbars) · Issue #160 · adchsm/Slidebars · GitHub
CSSの以下の箇所を
html.sb-scroll-lock.sb-active:not(.sb-static) { overflow: hidden; }
↓
html.sb-scroll-lock.sb-active:not(.sb-static), html.sb-scroll-lock.sb-active:not(.sb-static) body { overflow: hidden; height: 100%; }
に変更することで固定できるようです。私もこれで固定できました。
これに対して作者の方も確認できているようですがcssの修正は加えられていないです。