【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アニメーションを使っているので、動作も軽快です。先ほどの(1)〜(4)の条件も満たしています。
実装方法
ソース一式は
ココからダウンロードしてください。
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をフォローしておすすめ記事を購読しよう
!この記事を報告する