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

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

1

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

ドロワー(ナビゲーションドロワー)って？

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

スマホサイトでドロワー実装時に気をつけたいこと

1. なめらかにアニメーションして左（もしくは右）からメニューがスッと開く
2. ドロワー表示時は、ページの縦の長さがドロワーの縦サイズ(短い場合は端末の縦サイズ)と同じになる
3. ドロワー表示時、メインコンテンツ側をタップするとドロワーが閉じる
4. iOS5 / Android2.3以上は対応させたい。
5. PCブラウザでは動作しなくてもおk。(CSS3アニメーションなどを使うため)

いろいろ試した結果「Drawer Slide Menu」が良い感じだった！

【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 2番目の画像
　jQueryプラグインの「Drawer Slide Menu」が良い感じに動作してくれました。

・ GitHub
【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 3番目の画像
　CSS3アニメーションを使っているので、動作も軽快です。先ほどの（１）〜（４）の条件も満たしています。

実装方法

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

HTMLから読み込むソース
【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 4番目の画像

Body部分
【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 5番目の画像
Javascript
【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 6番目の画像
4行目： menu
ドロワー側に表示させたい要素を指定します。上記のように複数指定が出来ます。

5行目： menu_width
ドロワーの横幅サイズを指定します。

6行目： prepend_button_to
開閉ボタンを表示する要素を指定します。

7行目： button_content
開閉ボタンのテキストを指定します。

ちょっとカスタマイズ！右から開かせたい場合

【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 7番目の画像
(1)styles.css > #build-menu に「float:right」を追加。
(2)jquery.mobile-menu.js > 173〜179行目のCSSアニメーションの設定値をマイナスにする。
【jQueryプラグイン】スマホサイトにドロワーを実装してみよう！ 8番目の画像
　自分で最初から書くと手間なので、とても便利です。

U-NOTEをフォローしておすすめ記事を購読しよう
！この記事を報告する

この記事の関連キーワード