jQueryプラグインの「Sidr」を使用。
まずは上記URLからプラグインをダウンロード。
展開して出てきたCSS及びJSをヘッダー内で読み込む。
■CSS
※「Dark」、「light」のいずれかを読み込めばよい
1 2 3 4 | <!-- ダークカラーベース --> < link rel = "stylesheet" type = "text/css" href = "jquery.sidr.dark.css" /> <!-- ライトカラーベース --> < link rel = "stylesheet" type = "text/css" href = "jquery.sidr.light.css" /> |
■Javascript
※ヘッダー内かボディタグ終了直前で読み込む
1 | < script type = "text/javascript" src = "jquery.sidr.min.js" ></ script > |
■マークアップ
1 2 3 4 5 6 7 8 9 10 11 | < div id = "sidr" > < h3 >メニューヘッダー</ h3 > < ul > < li >< a href = "javascript:void(0)" >メニュー</ a ></ li > < li class = "active" >< a href = "javascript:void(0)" >メニュー</ a ></ li > < li >< a href = "javascript:void(0)" >メニュー</ a ></ li > < li >< a href = "javascript:void(0)" >メニュー</ a ></ li > < li >< a href = "javascript:void(0)" >メニュー</ a ></ li > < li >< a href = "javascript:void(0)" >メニュー</ a ></ li > </ ul > </ div > |
あとはメニューを開閉するためのトリガーを任意の要素に結び付けてあげればOK。
以下トリガーの設定例。
1 | < button type = "button" id = "sidr-trigger" >Menu</ button > |
例えば上記のようなIDを持つボタンをトリガーに設定したい場合は下記のような感じ。
1 2 3 4 5 | <script> $( function (){ $( '#sidr-trigger' ).sidr(); }) </script> |
これでボタンに対してトリガーが割り当てられる。めっちゃ簡単。
加えてsidr()関数にオプションを渡すことでメニューの開閉速度などを好みに設定することが可能。
1 2 3 4 5 6 7 8 | $( '#sidr-trigger' ).sidr({ // 開閉スピード speed:500, // メニューの位置(left or right) side: 'right' // jQueryのセレクターを指定可能 source: '#selector' }); |
sourceに関数を渡すとコールバックとして実行してくれたりもする。
その他のパラメーターは公式サイトを参照されたし。