最近、自作のWEBサイトのスマホ版のほうを修正しました。
その時にドロワーメニューを導入したかったのでいろいろ探すことに。
そいて簡単にドロワーメニューを導入できるjQueryプラグインのDrawerを導入しました!
今回は少ないコードでドロワーメニューを実装できるjQueryプラグイン Drawerを紹介します。
導入方法
ダウンロード
CDNがあるので、今回はCDNを使ってデモを作っていきます。
ファイルをダウンロードしたい方は、公式サイトにアクセスからどうぞ。
コード
DrawerのCSSと本体、そしてjQueryを読み込みます。
<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
続いてHTMLの記述です。
今回は公式サイトのHTMLよりシンプルに記述していきます。
ポイントは3つです。
- bodyのclassにdrawerとdrawer–leftを追加
- ドロワーメニューにしたい要素のclassにdrawer-navを追加
- ドロワーメニュー内に”閉じる”リンクを作成。classにdrawer-toggleを追加
- ドロワーを表示するためのボタンのclassにdrawer-toggleを追加
※.drawer-toggleはドロワーメニューが閉じているときにクリックすると、メニュー表示。
開いているときにクリックすると、メニューが閉じられます。
<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>
最後にスクリプトを記述します。
$(document).ready(function () { $('.drawer').drawer(); });
以上のコードで実装は完了です。
ドロワーメニューが表示されたら、オーバーレイ部分か”閉じる”リンクをクリックすることでメニューが閉じられます。
オプション
開閉のイベントを取得する
Drawerではドロワーメニューが開いたときと、閉じたときのイベントを取得することができます。
javascriptを以下のように記述しましょう。
$(document).ready(function () { // Drawer読み込み $('.drawer').drawer(); // ドロワーメニューが開いたとき $('.drawer').on('drawer.opened', function(){ alert('ドロワーが開きました'); }); // ドロワーメニューが閉じたとき $('.drawer').on('drawer.closed', function(){ alert('ドロワーが閉じられました'); }); });
注意点としては、”開ききったとき”と”閉じきったとき”に実行されるという点です。
スクリプトでメニューの開閉を制御する
クリックイベントなどでjavascript側からドロワーメニューの開閉を制御することも可能です。
HTMLを修正します。
<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>
クリックイベントで、ドロワーメニューを制御させるスクリプトを記述します。
$(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'); }); });
コメントを残す