【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！

　Facebookアプリなんかでもおなじみ。ドロワーとは、左（もしくは右）からスライドして出てくるナビゲーションです。ドロワー = 引き出し。アプリはもちろん、スマートフォンサイトでも実装しているサイトが増えてきています。

1. なめらかにアニメーションして左（もしくは右）からメニューがスッと開く

2. ドロワー表示時は、ページの縦の長さがドロワーの縦サイズ(短い場合は端末の縦サイズ)と同じになる

3. ドロワー表示時、メインコンテンツ側をタップするとドロワーが閉じる

4. iOS5 / Android2.3以上は対応させたい。

5. PCブラウザでは動作しなくてもおk。(CSS3アニメーションなどを使うため)

　jQueryプラグインの「Drawer Slide Menu」が良い感じに動作してくれました。

・ Drawer Slide Menu（このページからダウンロード可）

・ GitHub

・ サンプル

　CSS3アニメーションを使っているので、動作も軽快です。先ほどの（１）〜（４）の条件も満たしています。

　ソース一式は ココからダウンロードしてください。

HTMLから読み込むソース

Body部分

Javascript

4行目： menu

ドロワー側に表示させたい要素を指定します。上記のように複数指定が出来ます。

5行目： menu_width

ドロワーの横幅サイズを指定します。

6行目： prepend_button_to

開閉ボタンを表示する要素を指定します。

7行目： button_content

開閉ボタンのテキストを指定します。

(1)styles.css > #build-menu に「float:right」を追加。

(2)jquery.mobile-menu.js > 173〜179行目のCSSアニメーションの設定値をマイナスにする。

　自分で最初から書くと手間なので、とても便利です。

（提供： casemobile〜スマホコンテンツ開発ブログ）