ご依頼いただいたサイト制作で少しナビゲーション関連を調べたのでメモ。
狭いエリアに収まる、タッチなどで展開する、などの要件を満たしていれば、あとは好き好きだと思いますが、
「一枚モノのサイトだと少し話が変わります。」
ページ遷移を挟まないので、要求される項目が変わります。
開けたら閉めろ
メニュー項目をタッチしてジャンプしたら展開したメニューは閉じて欲しい。
ページ途中にジャンプして、再度ページ先頭に戻ったとき、メニューが開きっぱなしだとみっともないです。
「開けたら閉めろ」
縦に展開するケース
ナビゲーション全体の高さが増え、続くコンテンツの領域を押し下げる挙動はアウト。
ページ内へのリンク座標が、増えた高さのぶんズレます。
ズレたぶん補正しようとしても、メニュー項目の増減で変わってしまいます。
また、他のメニュー（フッターのテキストリンクなど）と挙動が違ってしまうなど、スマートではありません。
後続のコンテンツを押し下げるのが問題なら、ここを解決すれば良いので、ナビゲーション領域をabsoluteまたはfixedで固定、z-indexで後続領域の前面に出します。
これで解決、と思いきや、iPadの縦画面での挙動が変。
absoluteやfixedの解釈が、パソコン用ブラウザーやiPhoneなどと違うようです。
後続コンテンツが意図する場所に来なかったり、リンク先座標が展開時のものだったり、、、
ググってみたけれど、ヒットなし。CSSの書き方が悪いのかな。
このあたりの問題は、横に展開するスタイルを選択すると解決しますが、どうしても縦に展開したいこともあるんですよね。
試してみたプラグイン
- Max Mega Menu
- WP Responsive Menu
- Responsive Menu
- SlickNav Mobile Menu
全部公式ディレクトリにあるのでリンクはナシ。
Max Mega Menu
いろいろできるっぽい多機能タイプ。
有償版へのアップグレードパスあり。
設定が分かりにくかったのであまりいじっていません。
WP Responsive Menu
有名どころだと思います。
分かりやすく、そこそこ細かく設定できます。
縦に展開するときは、後続領域を押し下げます。
また、fixedにするオプションがあるのですが、これを有効にすると、タッチでページ先頭に移動します。
意図なのか、想定外なのかは分かりません。
また、iPhone表示で横スクロールが発生するケースがありました。CSSの書き方にミスがあったのかもしれません。
同じCSS、他のプラグインでは発生しなかったので、おかしくなったらまず最初にこれを外しています。
縦に展開させるときはアウト。
Responsive Menu
WP Responsive Menuよりも細かく設定できます。
有償版へのアップグレードパスあり。
「後続領域を押し下げない」というオプション項目があるのですが、有償版にしないと選択できない。
縦に展開させるときはアウトだが、横に展開するときはかなりイイです。
縦展開専用。
デフォルトでabsolute。
fixedの選択肢もあり。
iPadでの挙動が、完全ではないが一番まとも。
設定項目は多くありませんが、CSSでカバー。
縦に展開させるならコレ！
