Slidebars.js仕様変更後の実装方法
トランクです。はじめまして、こんにちは。
はてなブログを始めました。
開設したのは結構前でしたが、書くことがなかったので放置してましたが、表題の件で、
「参考記事が皆無やけん、これは書かないけん、どげんかせんといかん！」
てことで初投稿です。
さて、早速本題。
実装方法に入ります。
↑ファイル一式はこちらからDL
◇まずはmeta viewport tagの設定（ここは仕様変更前と同じ！）
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
◇jQueryの読み込み！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
◇slidebars.cssとslidebars.jsの読み込み
<link rel="stylesheet" href="path/to/slidebars.css">
<script src="path/to/slidebars.js"></script>
※もちろんパスはそれぞれの階層に合わせて変えてね♪
～ここからが仕様変更となった部分～
◇下記のdivタグでコンテンツ全体を囲む。（body直下に設置）
<div canvas="container"> </div>
・canvasエリアがいわゆるブラウザ画面内（常に表示されいるコンテンツ部分。）
・後述するoff-canvasは逆にブラウザ画面外＝ドロワーメニューということになります。
※固定されたナビゲーションやフッターを作りたいときは、body直下にさらにcanvasエリアを加える。
<div id="fixed-navigation" canvas=""> </div> <div canvas="container"> </div>
◇Basic Document（ここまでをまとめると）
<!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="path/to/slidebars.css"> </head> <body> <div canvas="container"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="path/to/slidebars.js"></script> </body> </html>
さて、次に行くぜ！！
◇Off-Canvas（＝ブラウザ画面外＝ドロワーメニュー本体）の設定
下記、指定方法。このdivボックス間にメニューを書く。
<div off-canvas="id side style"> </div>
※off-canvas名に必ず含めないといけないもの（3点）
・【id】
→固有のID名。英数字から始まるものでハイフン、数字も含めてもOK
・【side】
→メニューをどの位置から出すか。（left, right, top, bottom）から選択
・【style】
→メニューのアニメーションスタイルの設定。（reveal, push, overlay, shift.）から選択
◇jQueryの設定
<script> ( function ( $ ) { // Initialize Slidebars var controller = new slidebars(); controller.init(); } ) ( jQuery ); </script>
◇Basic Document（ここまでをまとめると）
<!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="path/to/slidebars.css"> </head> <body> <div canvas="container"> </div> <div off-canvas="id-1 left reveal"> </div> <div off-canvas="id-2 right push"> </div> <div off-canvas="id-3 top overlay"> </div> <div off-canvas="id-4 bottom shift"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="path/to/slidebars.js"></script> <script> ( function ( $ ) { // Initialize Slidebars var controller = new slidebars(); controller.init(); } ) ( jQuery ); </script> </body> </html>
※↑上下左右からそれぞれ異なる4つスタイルでドロワーメニューが出てくる様、設定しています。
あともうちょい！
次に行くぜ！！！
◇開閉ボタンの指定
buttonタグに（open,close,toggleのいずれか+id名）のclass名をつける。
ここでははtoggleを使用。
open→開くボタン
close→閉じるボタン
toggle→開閉ボタン
<button class="toggle-id-1"> MENU </button>
◇jQueryを追記
<script> // Toggle Slidebars $( '.toggle-id-1' ).on( 'click', function ( event ) { // Stop default action and bubbling event.stopPropagation(); event.preventDefault(); // Toggle the Slidebar with id 'id-1' controller.toggle( 'id-1' ); } ); </script>
※.on( 'click'の手前にはbuttonタグ（開閉ボタンの）のclass名を
※controller.toggle後にはドロワーメニューを囲うoff-canvas名のidの部分を
※開閉ボタン毎、ドロワーメニュー毎に、このスクリプトは個別に作成する（最後のまとめ部分参照）
◇Basic Document（最後のまとめ）
<!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="path/to/slidebars.css"> </head> <body> <div canvas="container"> </div> <div off-canvas="id-1 left reveal"> </div> <div off-canvas="id-2 right push"> </div> <div off-canvas="id-3 top overlay"> </div> <div off-canvas="id-4 bottom shift"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="path/to/slidebars.js"></script> <script> ( function ( $ ) { // Initialize Slidebars var controller = new slidebars(); controller.init(); // Toggle Slidebars $( '.toggle-id-1' ).on( 'click', function ( event ) { // Stop default action and bubbling event.stopPropagation(); event.preventDefault(); // Toggle the Slidebar with id 'id-1' controller.toggle( 'id-1' ); } ); $( '.toggle-id-2' ).on( 'click', function ( event ) { // Stop default action and bubbling event.stopPropagation(); event.preventDefault(); // Toggle the Slidebar with id 'id-2' controller.toggle( 'id-2' ); } ); $( '.toggle-id-3' ).on( 'click', function ( event ) { // Stop default action and bubbling event.stopPropagation(); event.preventDefault(); // Toggle the Slidebar with id 'id-3' controller.toggle( 'id-3' ); } ); $( '.toggle-id-4' ).on( 'click', function ( event ) { // Stop default action and bubbling event.stopPropagation(); event.preventDefault(); // Toggle the Slidebar with id 'id-4' controller.toggle( 'id-4' ); } ); } ) ( jQuery ); </script> </body> </html>
こんな感じです♪
あとは、ドロワーメニューに個別にclass名をつけてカスタマイズしていく！
適当にデザモサイトも作ったので、こちらで実際のソースコード見てもらった方がわかりやすいかもです( ^ω^ )
以上!!
