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

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

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

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

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