レスポンシブメニュー関連プラグイン

ワードプレス

ご依頼いただいたサイト制作で少しナビゲーション関連を調べたのでメモ。

狭いエリアに収まる、タッチなどで展開する、などの要件を満たしていれば、あとは好き好きだと思いますが、

「一枚モノのサイトだと少し話が変わります。」

ページ遷移を挟まないので、要求される項目が変わります。

開けたら閉めろ

メニュー項目をタッチしてジャンプしたら展開したメニューは閉じて欲しい。

ページ途中にジャンプして、再度ページ先頭に戻ったとき、メニューが開きっぱなしだとみっともないです。

「開けたら閉めろ」

縦に展開するケース

ナビゲーション全体の高さが増え、続くコンテンツの領域を押し下げる挙動はアウト。

ページ内へのリンク座標が、増えた高さのぶんズレます。

ズレたぶん補正しようとしても、メニュー項目の増減で変わってしまいます。

また、他のメニュー(フッターのテキストリンクなど)と挙動が違ってしまうなど、スマートではありません。

 

後続のコンテンツを押し下げるのが問題なら、ここを解決すれば良いので、ナビゲーション領域を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よりも細かく設定できます。

有償版へのアップグレードパスあり。

「後続領域を押し下げない」というオプション項目があるのですが、有償版にしないと選択できない。

縦に展開させるときはアウトだが、横に展開するときはかなりイイです。

SlickNav Mobile Menu

縦展開専用。

デフォルトでabsolute。

fixedの選択肢もあり。

iPadでの挙動が、完全ではないが一番まとも。

設定項目は多くありませんが、CSSでカバー。

縦に展開させるならコレ!