ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

軽量！Slidebars.jsの使い方～スマホでスライドするドロワーメニュー

      2019/04/08

 - javascript

スマホでスライドして表示するドロワーメニュー、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>

次から詳しく説明します。

１．設置するページのコンテンツを内包する

ページのすべてのコンテンツを#sb-siteで内包します。idを変更すると動作しません。

<div id="sb-site">
　ここにページのコンテンツ
</div>

２．スライドさせたいコンテンツを記述する

スライドして出したいコンテンツの内容は.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でも指定できます。

３．スライドさせたいコンテンツの制御

スライドを出し入れする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　クリックで開いているスライドバーを閉じます。

メニューボタンを１つだけ設置する場合は.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の修正は加えられていないです。