スマートフォンで頻繁に使われるドロワーメニューを実装するjqueryプラグインを紹介します。
左右どちらからの開閉にも対応できるシンプルなプラグインとなっています。
用意するもの
まずは公式サイトからプラグイン一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。
cssは、darkとlightの2色が用意されています。圧縮されてますが、こちらをいじれば色などの変更もできそうですね。
<link rel="stylesheet" href="css/jquery.sidr.dark.css" /> <script src="js/jquery-2.1.0.min.js" type="text/javascript"></script> <script src="js/jquery.sidr.min.js" type="text/javascript"></script>
基本的な使い方
まずは下記のようなメニューボタンとメニューパネルを用意します。
設定しているidは任意で大丈夫です。
<!—- メニューボタン ——>
<a id="menu_btn" href="#sidr">メニューボタン</a>
<!—- メニューパネル ——>
<div id="sidr">
<ul>
<li class="active"><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
そしてデフォルト値のまま使用する一番シンプルな指定は下記になります。
これで、#menu_btnをクリックすればパネルが開きます。
$(function(){
$('#menu_btn').sidr();
});
ただ、このデフォルト設定だとパネルには必ずid=”sidr”を設定しなければなりません。パネルのidを自由に指定するにはオプションを使う必要があります。
オプションは下記のように使います。
$(function(){
$('#menu_btn').sidr({
name: ‘menu_panel’, //ここでパネルのidを指定
side: 'right’, //左右どちらに開閉させるかを設定
speed:500, //開閉速度を設定
onOpen:function(){} //オープン時のcallback
});
});
より詳しいオプションについては公式サイトでご覧ください。
ちょっとデザインの変更が面倒そうですが、簡単だしページに複数入れるのも問題ないのでちょっとした制作時には使い勝手が良さそうですね。
