Slidebars.js【Ver2】の使い方、設定方法～バージョンが変わってます

スマホでスライドして表示するドロワーメニュー、jQueryプラグイン「Slidebars」の使い方、設置方法です。こちらの内容はバージョン2です。2016年6月頃のバージョンアップされ、公式ページもリニューアルされています。

以前のバージョンはこちらのページをご覧ください。
⇒軽量！Slidebars.jsの使い方～スマホでスライドするドロワーメニュー

公式サイトから必要ファイルをダウンロード
https://www.adchsm.com/slidebars/

以前のバージョンとの違い

スライドメニューを表示するときのエフェクトがOff-Canvas Menu Effectsになっています。それと以前はオプション設定が結構あったのですがサイトを見る限りなくなっているようです。

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 canvas="container">
        <!--ここにページのコンテンツ内容-->
        <div class="sb-open-left">MENU</div> 
    </div>
    <div off-canvas="sb-left left push">
        <!--ここに右からスライドしてくるコンテンツ内容-->
    </div>
</body>

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

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

ページのすべてのコンテンツをcanvas=”container”で内包します。

<div canvas="container">
　ここにページのコンテンツ
</div>

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

スライドして出したいコンテンツの内容はoff-canvas=”sb-left left push”で内包します。

<div canvas="container">
　ここにページのコンテンツ
</div>
<div off-canvas="sb-left left push">
　ここにスライドして出てくるコンテンツ
</div>

off-canvasに書く要素は、関連付けさせる（id）、スライドさせたい方向（side）、スライドの動作（style）の３つを入れます。

<div off-canvas="id side style">
</div>

・idは、この後で説明するslidebarsを動作させるスクリプトで関連づける設定をします。

・sideは、top,right,bottom,leftのどれかの値を入れます。

・styleは、reveal,push,overlay,shiftのどれかの値を入れます。

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

スライドを出し入れするMENUボタンを追加します。設置したい場所に記述します。ここで指定するclassは後に記述するスクリプトで制御するのに使用します。

<div class="sb-open-left">MENU</div>

Slidebars実行スクリプト

Slidebarsを実行するスクリプトをページ内に記述します。公式ページ、サンプルデモ１ではscript.jsとして外部ファイル化されています。サンプルデモ２ではページ下部で直書きしています。このスクリプトはコンテンツの後で読み込まないと動作しないのでページ下部（/body上）に記述します。

緑字の箇所はメニューのclassを指定します。赤字の箇所はスライドさせるコンテンツのoff-canvasのidを指定します。

<script>
( function ( $ ) {
 // Initialize Slidebars
 var controller = new slidebars();
 controller.init();

 /**
 * Original Version Style Control Classes
 */

 // Open left
 $( '.sb-open-left' ).on( 'click', function ( event ) {
 event.preventDefault();
 event.stopPropagation();

 controller.open( 'sb-left' );
 } );

 // Toggle left
 $( '.sb-toggle-left' ).on( 'click', function ( event ) {
 event.preventDefault();
 event.stopPropagation();

 controller.toggle( 'sb-left' );
 } );

 // Open right
 $( '.sb-open-right' ).on( 'click', function ( event ) {
 event.preventDefault();
 event.stopPropagation();

 controller.open( 'sb-right' );
 } );

 // Toggle right
 $( '.sb-toggle-right' ).on( 'click', function ( event ) {
 event.preventDefault();
 event.stopPropagation();

 controller.toggle( 'sb-right' );
 } );

 // Close
 $( '.sb-close' ).on( 'click', function ( event ) {
 event.preventDefault();
 event.stopPropagation();

 controller.close();
 } );
} ) ( jQuery );
</script>

controller.open( ‘***’ ); が開く動きをします。
controller.toggle( ‘***’ ); がtoggle（開閉）の動きをします。
controller.close(); が閉じる動きをします。

上記説明のサンプルコードの全文

<!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 canvas="container">
        <!--ここにページのコンテンツ内容-->
        <div class="sb-open-left">MENU</div> 
    </div>
    <div class="sb-left left push">
        <!--ここに左からスライドしてくるコンテンツ内容-->
    </div>

<script>
( function ( $ ) {
 var controller = new slidebars();
 controller.init();

 $( '.sb-toggle-left' ).on( 'click', function ( event ) {
 event.preventDefault();
 event.stopPropagation();

 controller.toggle( 'sb-left' );
 } );

} ) ( jQuery );
</script>
</body>
</html>

以上です。
ここでは基本的な使用方法を紹介しましたが、このほかにも公式ページでは細かな設定ができるようです。

個人的には以前のバージョンより設定が簡素化したとは思いますが、エフェクトがOff-Canvas Menu Effectsになっているので汎用性は無くなってしまったように感じました。