横から出てくるパネル（スライド）メニュー
2014年11月29日（土）
最近いくつかスマホで横から出てくるスライドメニュー（ドロワーメニュー？）案件があり、色々調べたのでメモメモ。
右開きや、メニューの中身の方が多い場合のスクロール問題、機種特有問題等、試しては駄目の繰り返し。
横から出てくるスライドパネル（ドロワーメニュー）
Sidr
今一番流行ってるのか？？実装についての情報が充実してるイメージ。
左からメニューが出てくる場合、または出てくるメニュー部分がページ本体より短い場合ならこれでOK。（以下のサイトに詳しくまとめられてますが、Androidだと右メニューの時にスクロールできない問題があるようです。）
- スマートフォン向けページでサイドメニューを実装する方法比較 | TechRacho
- jQuery – 横からにゅるっとメニュー（ドロワーメニュー）を実装してみた – Qiita
- 【デモ付き】jQueryを使って、ドロワーメニューを実装したいけど、どれがいいの？【まとめ】 | WEBDECO
やっぱり皆さん色々試行錯誤されてるようですが、人さまの色々試した情報（これ使ったらこうだった的まとめ）は大変ありがたいですねー。
drawer
これは…どうだったっけ…右から出るのが出来なかったんだっけな（忘却）。
mmenu
実装してみたところ、メニュー開閉ボタンを固定する使い方さえしなければ問題なかったです。メニュー開閉ボタン固定→ページスクロール→メニューを開く→メニューを閉じる→ちらつく。
- [JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu | コリス
- スマホサイト制作に役立つ スライドメニュー 【mmenu】使い方 jQueryプラグイン | Glow-Factory
jQuery Mobile。
結局思い通りの動きはJqueryMobile。
- jquery mobile 1.4ならFacebookみたいなスライドメニューも超簡単 | デジタルゲート
- jQuery Mobile： Panelウィジェットで左右からスライド表示するには？ – Build Insider
しかし、別の部分で色々調整が必要になるから、このためだけにjQueryMobileとか嫌なんですよね…。
とりあえずjQueryMobileの問題を解決する色々など。
- jQueryMobileのデフォルトのスタイルを解除する方法 « サイト制作・研究中の内容を紹介するラボブログ | 株式会社トライアド
- jQuery Mobile Tips【Ajax無効化設定とブラウザの戻るバグ対策】 | Web制作ならWebNAUT
その他、気になる＆時間があったら是非試したい
もう、毎回一々試してやってみるの面倒なので、この動きにはこのスクリプトで、もう決まりっ！として欲しい…。
