drawer-menu Version2
drawer-menuは左右からスライドで現れるメニューを実装するためのjQueryプラグインです。実装には jQuery 2.1.1 以上が必要です。
サポート
- Android2.3 以降
- iOS6 以降
※ PCでも使用できますがサポートは現在行っておりません。
必要なファイル
- jQuery 2.1.1 以上
- jquery.drawer-menu.js (drawer-menu 本体)
- jquery.drawer-menu.css (drawer-menu 付属CSS) いくつかのjQueryバージョンで不具合がありCssAnimationが動作しないのを確認しています。
簡単な使い方
jquery.drawer-menu.js をダウンロードして使用するHTMLにjQueryを読み込んだ後にインクルードしてください。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.drawer-menu.js"></script>jquery.drawer-menu.css をダウンロードして使用するHTMLにインクルードしてください。実装を簡単に行えるように必要なスタイルを指定しています。最低限必要なクラスしか指定しておりません。過不足があればCSSスタイルを追記してください。下記「CSSの設定」に例としてCSSの設定方法を記載しているので参照してください。 CSSでは下記のクラスを定義しています。
- .drawer-menu-body : ページコンテンツ、メニューの親になる要素に対してのスタイルクラス
- .drawer-menu-page : ページコンテンツに対してのスタイルクラス
- .drawer-menu-panels : メニューに対してのスタイル
- .drawer-menu-panel : サブメニューに対してのスタイル
HTMLの記述
<head> <link href="jquery.drawer-menu.css" type="text/css" rel="stylesheet" > </head> <body class="drawer-menu-body"> <div class="drawer-menu-page"> <p> <input type="button" onclick="$('#drawer-menu').drawer_menu('toggle')" value="メニュー" /> </p> <p>ページコンテンツ部分</p> </div> <!-- メニュー部分 --> <div class="drawer-menu-panels" id="drawer-menu" > <div class="drawer-menu-panel" name="panel_main" > <p>メインメニュー</p> <input type="button" onclick="$.drawer_menu.close()" value="メニューを閉じる" /> <input type="button" onclick="$.drawer_menu.open('#drawer-menu-sub01')" value="サブメニュー1" /> <input type="button" data-drawer_menu-open='[name="panel_01"]' value="data 要素の関連付けでサブメニューを開く" /> </div> <div class="drawer-menu-panel" name="panel_01" id="drawer-menu-sub01"> <p>サブメニュー1</p> <input type="button" onclick="$.drawer_menu.close()" value="メニューを閉じる" /> </div> <div class="drawer-menu-panel" name="panel_02" > <p>サブメニュー2</p> <input type="button" onclick="$.drawer_menu.child()" value="サブメニュー2を閉じる" /> </div> </div> </body> <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/jquery.drawer-menu.min.js"></script> <script> $(document).ready(function(){ $('.drawer-menu-panels').drawer_menu(); }); </script> drawer_menu の関数
drawer_menu jQuery プラグインでは $(expr).drawer\_menu と $.drawer\_menu と data-drawer\_menu で使用できる関数を用意しています。必要に応じて使い分けてください。
引数 : expr
下記関数で expr が引数として用意されているものは、jQuery selecter で要素の指定ができます。指定する要素については各関数を参照してください。
引数 : callback
下記関数で callback が引数として用意されているものは callback を指定できます。callback はアニメーションが終了した際に呼び出されます。第一引数には、ドロワーメニューとして指定した expr が入ります。
$(expr).drawer_menu の関数
- $(expr).drawer_menu(options)
- $(expr).drawer_menu("open", callback)
- $(expr).drawer_menu("close", callback)
- $(expr).drawer_menu("toggle", callback)
$(expr).drawer_menu(options)
メニューをドロワーメニューとして使用できるように初期化します。戻り値は $(expr) になります。
expr
ドロワーメニューとして使用したい要素1つを指定します。
option
メニューの表示について、以下のオプションを設定できます。省略した場合は下記の値で実行されます。
$(".drawer-menu-panels").drawer_menu({ body : '.drawer-menu-body:first', speed : 500, easing : 'liner', side : 'left', children : '.drawer-menu-panel', child_speed : 500, child_easing : 'liner', child_side : 'left', width : '80%', displace : true, tapToClose : '.drawer-menu-page', resizeToClose : false, resizePer : false, cssAnimation : true, beforeOpen : function () {}, afterOpen : function () {}, afterOpenAnimation : function () {}, beforeClose : function () {}, afterClose : function () {}, afterCloseAnimation : function () {}, });body
ページコンテンツ、メニューの親になる要素を jQuery selecter で指定します。デフォルトは.drawer-menu-body:firstです。
easing
メニューが表示時にかかるアニメーションに easing を加えます。スマートフォンではCPU,GPUの性能が悪く、なめらかな easing になりません。 また、JS Animation と CSS Animation の時では Easing の指定方法が異なります。下記をご参考ください。デフォルトは linear です。
- JA Animation ： http://semooh.jp/jquery/cont/doc/easing/
- CSS Animation ： http://matthewlein.com/ceaser/
speed
メニューが表示時にかかるアニメーションの速度を指定します。デフォルトは500です。
side
メニューが表示される位置を左右(left, right)で指定できます。デフォルトはleftです。
children
サブメニューとなる要素を jQuery selecter で指定します。
children : '[name^="panel"]', // name="panel" で始まる要素 children : '.panel' , // CSS Class に .panel を指定した要素child_speed
サブメニューが表示時にかかるアニメーションの速度を指定します。デフォルトは500です。
child_easing
サブメニューが表示時にかかるアニメーションに easing を加えます。スマートフォンではCPU,GPUの性能が悪く、なめらかな easing になりません。 また、JS Animation と CSS Animation の時では Easing の指定方法が異なります。下記をご参考ください。デフォルトは linear です。
child_side
サブメニューが表示される位置を左右(left, right)で指定できます。デフォルトはleftです。
width
メニューの幅を、% , px で指定します。 デフォルトは80%です。
displace
メニュー表示時にページコンテンツの位置を動かすか動かさないかを指定できます。true にするとメニュー表示時にページコンテンツも一緒に動きます。false にするとページコンテンツに重なるようにメニューが表示されます。デフォルトはtrueです。
tapToCloce
メニュー表示時にページコンテンツをクリック(タップ)してメニューを閉じるかを設定できます。true , false もしくは jQuery selecterで指定します。true の場合は、メニュー以外の body 以下の要素クリックされた場合のみ閉じます。jQuery selecter で指定された場合は、その要素がクリックされた場合のみ閉じます。デフォルトは.drawer-menu-pageです。
resizeToClose
画面がリサイズされるとメニューが自動的にクローズするようになります。 デフォルトは、false です。
resizePer
width を % で指定した場合、% を px に変換して処理を行います。 デフォルトは、false です。
CssAnimation
アニメーションを CSS の transform : translateX() で行います。JS Animation より滑らかな動きになります。 本スクリプト version 2 よりデフォルトが true になります。
beforeOpen, afterOpen, afterOpenAnimation, beforeClose, afterClose, afterOpenAnimation
メニューが開く前後とアニメーションが終了時、メニューが閉じる前後とアニメーション終了時、に実行する処理を指定できます。
$(expr).drawer_menu("open", callback)
メニューもしくはサブメニューを開きます。 expr に指定する要素により、挙動が変わります。詳しくは下記の expr を参照してください。戻り値は $(expr) になります。
expr
ドロワーメニューとして初期化した要素で開きたいメニュー、もしくはサブメニューを1つを指定します。
- ドロワーメニュー本体 : ドロワーメニューが開きます。サブメニューが存在する場合は、メインメニューを開きます。
- サブメニュー : サブメニューが開きます。
- ドロワーメニューもしくはサブメニューとして未登録要素を指定 : 機能しません。
$(expr).drawer_menu("close", callback)
メニューもしくはサブメニューを開きます。 expr に指定する要素により、挙動が変わります。詳しくは下記の expr を参照してください。戻り値は $(expr) になります。
expr
ドロワーメニューとして初期化した要素で閉じたいメニュー、もしくはサブメニューを1つを指定します。
- ドロワーメニュー本体 : ドロワーメニューが閉じます。
- サブメニュー : 現在開いているドロワーメニューを閉じて、expr で指定したサブメニューが閉じます。
- ドロワーメニューもしくはサブメニューとして未登録要素を指定 : 現在開いているメニューを閉じます。
$(expr).drawer_menu("toggle", callback)
メニューもしくはサブメニューの開閉をトグルで行います。 expr に指定する要素により、挙動が変わります。詳しくは下記の expr を参照してください。戻り値は $(expr) になります。
expr
ドロワーメニューとして初期化した要素でトグルで開閉したいメニュー、もしくはサブメニューを1つを指定します。
$(expr).drawer_menu("child", callback)
サブメニューの開閉をトグルで行います。 戻り値は $(expr) になります。
expr
メニューまたはサブメニューの要素1つを jQuery selecter で指定します。
- ドロワーメニュー本体 : 現在開いているサブメニューが閉じます。
- サブメニュー : 指定したサブメニューが閉じます。
- ドロワーメニューもしくはサブメニューとして未登録要素を指定 : サブメニューが開いている場合は閉じます。サブメニューが開いていない場合は機能しません。
$.drawer_menu の関数
上記の $(expr).drawer_menu とほぼ同等の動きをします。戻り値は機能しない場合は false、それ以外は以下の文字列が帰ります。
open = メニューを開いた。 close = メニューを閉じた。 child_open = サブメニューを開いた child_close = サブメニューを閉じた。 - $.drawer_menu.open(expr, callback)
- $.drawer_menu.close(expr, callback)
- $.drawer_menu.toggle(expr, callback)
- $.drawer_menu.child(expr, callback)
data 要素
HTML に data 要素を指定することで、メニューボタンとして使用することができます。jQuery の live 関数の不具合により、iPhone では使用できないことが確認されております。
- data-drawer_menu-open="expr" :
$(expr).drawer_menu("open")と同一の動作をします。 - data-drawer_menu-close="expr" :
$(expr).drawer_menu("close")と同一の動作をします。 - data-drawer_menu-toggle="expr" :
$(expr).drawer_menu("toggle")と同一の動作をします。 - data-drawer_menu-child="expr" :
$(expr).drawer_menu("child")と同一の動作をします。
サブメニュー要素に対して以下の data 要素を指定すると、サブメニューを閉じた後に開くサブメニューを指定できます。
- data-drawer_menu-closeto="expr"
<!-- メニュー部分 --> <div class="drawer-menu-panels" id="drawer-menu" > <div class="drawer-menu-panel" name="panel_main" > <p>メインメニュー</p> <input type="button" onclick="$.drawer_menu.close()" value="メニューを閉じる" /> <input type="button" onclick="$.drawer_menu.open('#drawer-menu-sub01')" value="サブメニュー1" /> <input type="button" data-drawer_menu-open='[name="panel_01"]' value="data 要素の関連付けでサブメニューを開く" /> </div> <div class="drawer-menu-panel" name="panel_01" id="drawer-menu-sub01"> <p>サブメニュー1</p> <input type="button" onclick="$.drawer_menu.close()" value="メニューを閉じる" /> </div> <div class="drawer-menu-panel" name="panel_02" data-drawer_menu-closeto='#drawer-menu-sub01' > <p>サブメニュー2 閉じたらサブメニュー1が開かれる</p> <input type="button" onclick="$.drawer_menu.child()" value="サブメニュー2を閉じる" /> </div> </div> CSS の設定
メニューオープン時のスタイル
メニューが開いている時は html に data-drawer_menu-state="open" の data 要素が追加されます。
メニュークローズ時のスタイル
メニューが閉じている時は html に data-drawer_menu-state="open" の data 要素が追加されます。
アニメーション時のスタイル
アニメーション時には html に data-drawer_menu-state="animating" の data 要素が追加されます。
その他設定例
スマートフォンでは、overflow : autoは使用できません。Android2.3 では position : fixed は使用できません。「メニューを開いたままページコンテンツをスクロールさせる」 CSS設定例は PC 向けの設定になります。
メニューを開いたまま、ページコンテンツをスクロールさせる (position : fixed 使用)
html[data-drawer_menu-state="open"]{ overflow-x : hidden; } html[data-drawer_menu-state="open"] .drawer-menu-page{ overflow-x : hidden; } .drawer-menu-panels{ position : fixed; } メニューを開いたまま、ページコンテンツをスクロールさせる (position : absolute 使用,サイズは%指定の場合)
全体の大きさからメニューからの大きさを引いたサイズにafterOpenAnimationを使って変更しています。 position : fixed を使ったときのようなサイズにしたい場合は、そのひとつ下の div などの大きさを 100% 以上にします。 beforeClose で元に戻します。
<style> html[data-drawer_menu-state="open"] .drawer-menu-page{ overflow-x : hidden; overflow-y : auto; } </style> <body class="drawer-menu-body"> <div class="drawer-menu-page"> <div> <p> <input type="button" onclick="$('#drawer-menu').drawer_menu.toggle()" value="メニュー" /> </p> <p>ページコンテンツ部分</p> </div> </div> <!-- メニュー部分 --> <div class="drawer-menu-panels" id="drawer-menu" > <div class="drawer-menu-panel" name="panel_main" > <p>メインメニュー</p> <input type="button" onclick="$.drawer_menu.close()" value="メニューを閉じる" /> <input type="button" onclick="$.drawer_menu.open('#drawer-menu-sub01')" value="サブメニュー1" /> <input type="button" data-drawer_menu-open='[name="panel_01"]' value="data 要素の関連付けでサブメニューを開く" /> </div> </div> </body> <script> $('#drawer-menu').drawer_menu({ afterOpenAnimation : function(){ $('.drawer-menu-page').css({ 'width' : '20%' }); $('.drawer-menu-page > div').css({ 'width' : '180%' }); }, beforeClose : function(){ $('.drawer-menu-page').css({ 'width' : '100%' }); $('.drawer-menu-page > div').css({ 'width' : '100%' }); }, }); </script> メニューを開いたまま、ページコンテンツをスクロールさせる (position : absolute 使用,サイズはpx指定の場合)
ウィンドウ全体の大きさからメニューからの大きさを引いたサイズにafterOpenAnimationを使って変更しています。 position : fixed を使ったときのようなサイズにしたい場合は、そのひとつ下の div などの大きさをウィンドウサイズにします。これではリサイズ時に大きさが変わらなくなるので、window resize イベントに要素のサイズを変更する処理を登録します。 beforeClose で元に戻します。 window resize イベントは連続で行うと処理が重くなるのでご注意ください。
<style> html[data-drawer_menu-state="open"] .drawer-menu-page{ overflow-x : hidden; overflow-y : auto; } </style> <body class="drawer-menu-body"> <div class="drawer-menu-page"> <div> <p> <input type="button" onclick="$('#drawer-menu').drawer_menu.toggle()" value="メニュー" /> </p> <p>ページコンテンツ部分</p> </div> </div> <!-- メニュー部分 --> <div class="drawer-menu-panels" id="drawer-menu" > <div class="drawer-menu-panel" name="panel_main" > <p>メインメニュー</p> <input type="button" onclick="$.drawer_menu.close()" value="メニューを閉じる" /> <input type="button" onclick="$.drawer_menu.open('#drawer-menu-sub01')" value="サブメニュー1" /> <input type="button" data-drawer_menu-open='[name="panel_01"]' value="data 要素の関連付けでサブメニューを開く" /> </div> </div> </body> <script> $('.drawer-menu-panels').drawer_menu({ width : '200px', afterOpenAnimation : afterOpenAnimation, beforeClose : function(){ $('.drawer-menu-page').css({ 'width' : '100%' }); $('.drawer-menu-page > div').css({ 'width' : '100%' }); $(window).off('resize', resizeTo); }, }); var timer = null; function resizeTo() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { afterOpenAnimation(); }, 200); } function afterOpenAnimation(){ var width = $('body').outerWidth(); $('.drawer-menu-page').css({ 'width' : width - 200 }); $('.drawer-menu-page > div').css({ 'width' : width }); $(window).on('resize', resizeTo); } </script> 
