【jQuery】左右でスライド開閉するメニューを実装する。

jQueryプラグインの「Sidr」を使用。

http://www.berriart.com/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に関数を渡すとコールバックとして実行してくれたりもする。
その他のパラメーターは公式サイトを参照されたし。