【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！
- 2014/03/11
- casemobile公式
ドロワー(ナビゲーションドロワー)って？
Facebookアプリなんかでもおなじみ。ドロワーとは、左（もしくは右）からスライドして出てくるナビゲーションです。ドロワー = 引き出し。アプリはもちろん、スマートフォンサイトでも実装しているサイトが増えてきています。
スマホサイトでドロワー実装時に気をつけたいこと
1. なめらかにアニメーションして左（もしくは右）からメニューがスッと開く
2. ドロワー表示時は、ページの縦の長さがドロワーの縦サイズ(短い場合は端末の縦サイズ)と同じになる
3. ドロワー表示時、メインコンテンツ側をタップするとドロワーが閉じる
4. iOS5 / Android2.3以上は対応させたい。
5. PCブラウザでは動作しなくてもおk。(CSS3アニメーションなどを使うため)
いろいろ試した結果「Drawer Slide Menu」が良い感じだった！
jQueryプラグインの「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〜スマホコンテンツ開発ブログ）
U-NOTEをフォローしておすすめ記事を購読しよう
！この記事を報告する