最近、自作のWEBサイトのスマホ版のほうを修正しました。
[kanren postid=”381″]
その時にドロワーメニューを導入したかったのでいろいろ探すことに。
そいて簡単にドロワーメニューを導入できるjQueryプラグインのDrawerを導入しました!
今回は少ないコードでドロワーメニューを実装できるjQueryプラグイン Drawerを紹介します。
導入方法
ダウンロード
CDNがあるので、今回はCDNを使ってデモを作っていきます。
ファイルをダウンロードしたい方は、公式サイトにアクセスからどうぞ。
コード
DrawerのCSSと本体、そしてjQueryを読み込みます。
1 2 3 4 5 6 7 | <!-- drawer.css --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css" > <!-- jquery & iScroll --> <!-- drawer.js --> |
続いてHTMLの記述です。
今回は公式サイトのHTMLよりシンプルに記述していきます。
ポイントは3つです。
- bodyのclassにdrawerとdrawer–leftを追加
- ドロワーメニューにしたい要素のclassにdrawer-navを追加
- ドロワーメニュー内に”閉じる”リンクを作成。classにdrawer-toggleを追加
- ドロワーを表示するためのボタンのclassにdrawer-toggleを追加
※.drawer-toggleはドロワーメニューが閉じているときにクリックすると、メニュー表示。
開いているときにクリックすると、メニューが閉じられます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < body class = "drawer drawer--left" > <!-- ドロワーで表示されるメニュー --> < nav class = "drawer-nav" role = "navigation" > < ul class = "drawer-menu" > < li >< a class = "drawer-brand" href = "#" >Brand</ a ></ li > < li >< a class = "drawer-menu-item" href = "#" >Nav1</ a ></ li > < li >< a class = "drawer-menu-item drawer-toggle" href = "#" >Nav2</ a ></ li > </ ul > </ nav > <!-- ドロワーを表示するためのボタン --> < button class = "drawer-toggle" >メニュー表示</ button > </ body > |
最後にスクリプトを記述します。
1 2 3 | $(document).ready( function () { $( '.drawer' ).drawer(); }); |
以上のコードで実装は完了です。
ドロワーメニューが表示されたら、オーバーレイ部分か”閉じる”リンクをクリックすることでメニューが閉じられます。
[btn class=”rich_pink”]デモ確認へ[/btn]
オプション
開閉のイベントを取得する
Drawerではドロワーメニューが開いたときと、閉じたときのイベントを取得することができます。
javascriptを以下のように記述しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).ready( function () { // Drawer読み込み $( '.drawer' ).drawer(); // ドロワーメニューが開いたとき $( '.drawer' ).on( 'drawer.opened' , function (){ alert( 'ドロワーが開きました' ); }); // ドロワーメニューが閉じたとき $( '.drawer' ).on( 'drawer.closed' , function (){ alert( 'ドロワーが閉じられました' ); }); }); |
注意点としては、”開ききったとき”と”閉じきったとき”に実行されるという点です。
[btn class=”rich_pink”]デモ確認へ[/btn]
スクリプトでメニューの開閉を制御する
クリックイベントなどでjavascript側からドロワーメニューの開閉を制御することも可能です。
HTMLを修正します。
1 2 3 4 5 6 7 8 9 10 11 12 | < nav class = "drawer-nav" role = "navigation" > < ul class = "drawer-menu" > < li >< a class = "drawer-brand" href = "#" >ブランド名</ a ></ li > < li >< a class = "drawer-menu-item" href = "#" >メニュー1</ a ></ li > < li >< a class = "drawer-menu-item" href = "#" >メニュー2</ a ></ li > < li >< a class = "drawer-menu-item" href = "#" >メニュー3</ a ></ li > < li >< a class = "drawer-menu-item close-link" href = "#" >閉じる</ a ></ li > < li >< a class = "drawer-menu-item toggle-start" href = "#" >toggle実行</ a ></ li > </ ul > </ nav > < button class = "open-btn" >メニュー表示</ button > < button class = "toggle-start" >toggle実行</ button > |
クリックイベントで、ドロワーメニューを制御させるスクリプトを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document).ready( function () { // Drawer読み込み $( '.drawer' ).drawer(); // .open-btnクリック時、ドロワーを開く $( '.open-btn' ).click( function (){ $( '.drawer' ).drawer( 'open' ); }); // .close-linkクリック時、ドロワーを閉じる $( '.close-link' ).click( function (){ $( '.drawer' ).drawer( 'close' ); }); // .toggle-startクリック時、 // .drawer-toggleをクリックしたときと同じ処理を実行 $( '.toggle-start' ).click( function (){ $( '.drawer' ).drawer( 'toggle' ); }); }); |
[btn class=”rich_pink”]デモ確認へ[/btn]
関連
[kanren postid=”401″]
コメント