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

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

【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アニメーションを使っているので、動作も軽快です。先ほどの(1)〜(4)の条件も満たしています。

実装方法

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

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をフォローしておすすめ記事を購読しよう
この記事を報告する