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

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

1

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

　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アニメーションの設定値をマイナスにする。
　自分で最初から書くと手間なので、とても便利です。

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

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

「CSS」「技術」「開発」に関連する記事