“Twenty Fourteen” のドロップダウンメニューを改良!

LINEで送る
Pocket

改良後のトップメインメニュー

改良後のトップメインメニュー

WordPress のデフォルトテーマ Twenty Fourteen (1.1) を使っていて、トップメインメニューの表示に不便さを感じたので少し手を加えました。

目次

  1. Twenty Fourteen のメニューを調べよう。
  2. サブメニューをウィンドウ内に表示しよう。
  3. 飾り付けしてみよう。

1. Twenty Fourteen のメニューを調べよう。

改良前は次のように表示されていました。サブメニューがウィンドウからはみ出て、見えなくなってしまっていますね。

Twenty Fourteen のトップメインメニュー

Twenty Fourteen のトップメインメニュー

実際には見えませんが、SUB-MENU 2 の右、ウィンドウの外にメニューリストが表示されているんです。こんなふうに。(イメージです。)

Twenty Fourteen では画面の外にこのように表示されている。(イメージです。)

Twenty Fourteen では画面の外にこのように表示されている。(イメージです。)

SUB-MENU を表示させようとして横スクロールバーが表示されます。

header部がposition=relativeのときはウィンドウからはみ出す分だけ横スクロールバーが表示されますが、ポインタをスクロールバーに移動させようとするとサブメニューを閉じてしまいますので結局メニュー全体を表示させることはできません。また、header部がposition=fixedのときはウィンドウからはみ出す部分は非表示となります。

2. サブメニューをウィンドウ内に表示しよう。

トップメインメニューのいちばん右のリストがサブメニューを持つ場合に、画面の内側(左側)へと表示していくようにします。
こんな風に。

改良後のトップメインメニュー

改良後のトップメインメニュー

まず、トップメインメニューでいちばん右に表示されるメニューリスト(上の図でNav-Menu 1 と表示されているリスト)について、<ul class="sub-menu"><li><ul class="sub-menu">を持つ場合のstyle.css設定をします。(Twenty Fourteen のstyle.cssを直接編集するのではなく、子テーマを作ってから編集してくださいね。)

left: -100% を追加

left: -100% を追加

これでは Nav-Menu 1 にポインタを乗せただけでその下位のsub-menu含めて全て表示してしまいますので、次のように設定します。

Sub-Menu 2 の下位のSub-menu は height: 0;overflow: hidden;

Sub-Menu 2 の下位のSub-menu は height: 0;overflow: hidden;

これで下位にsub-menuを持つリストにポインタを乗せたときに、直接のsub-menuのみ表示されるようになりました。

Sub-Menu 2 の下位のSub-menu は height: auto;overflow: visible;

Sub-Menu 2 の下位のSub-menu は height: auto;overflow: visible;

Nav-Menu 1 の下の Sub-Menu 2 にポインタを乗せたときはじめて左側にその Sub-Menu 1,2 が表示されます。

3. 飾り付けしてみよう。

次に、下層をもつリストに印をつけましょう。
Twenty Fourteen では次のように表示されます。

Twenty Fourteen の階層メニュー

Twenty Fourteen の階層メニュー

Twenty Fourteen で使われているこの印を利用して、次のように設定してみます。

Twenty Fourteen の印を回転

Twenty Fourteen の印を回転

リストの文字と重なってしまっていますので、見た目を調整します。

擬似要素の位置を調整

擬似要素の位置を調整

完成しました。

完成形。

完成形。

トップメインメニューのいちばん右のリストだけ対応しましたが、二つ三つ同じ対策をしたほうが良いかもしれませんね。

たとえばこのように。

何かのご参考になれば幸いです。

LINEで送る
Pocket