CSSだけでWordPressのグローバルメニューをドロップダウン化してみる

 アコーディオン、または多層化などとも呼ばれるそうです。メニュー項目が多い場合に、わかりやすく分類できて便利です。JavaScript や jQuery などで実現する方法もありますが、今回は CSS だけでカスタマイズする方法について解説します。

ドロップダウングローバルメニューの構造

グローバルメニューを実現するための方法はいくつかあると思いますが、一般的なのは ul タグと li タグを使う方法でしょうか。WordPress でもそうなっています。ドロップダウンしないグローバルメニューの場合、HTML は次のようになっています。

ドロップダウンにしたければ ul と li を入れ子構造にするだけです。

WordPressでの設定

静的 HTML サイトなどの場合には HTML を手打ちしなければなりませんが、WordPress であれば管理画面からの操作でドロップダウングローバルメニューを実現することができます。「外観」→「メニュー」に移動し、まずは必要なメニュー項目を作成しましょう。

ドロップダウンにしたければ、子項目にしたいメニューをドラッグ&ドロップで移動し、入れ子構造にするだけで済みます。

デフォルトの設定で出力される HTML は次のようになります。

ひとつ余分に div タグで囲まれていたり、ul タグにクラス属性が自動で割り振られたりしていますが、テーマの PHP ファイルを編集することができるのなら、出力 HTML をカスタマイズすることも可能です。以前記事にしましたので、よろしければこちらもどうぞ。

デザインのカスタマイズ

次のような HTML をカスタマイズするとします。クラス属性については WordPress を意識しています。

CSS のサンプルです。

共通部分ですが、これはドロップダウンしないグローバルメニューとほぼ同じものです。ただし、ひとつだけ注意。li タグを float:left; で横並べにしていますが、これをクリアするにはいくつか方法があります。そのなかで、float で並べた要素の親要素に overflow:hidden; を指定する方法は使わないでください。

overflow プロパティは、領域内に収まりきらない内容をどのように処理するかを指定するプロパティです。ここで hidden を指定すると、文字通りはみ出した部分を表示しないことになるので、ドロップダウン部分を見ることができなくなってしまいます。

ドロップダウン部分についてですが、次のところで違和感をもったかもしれません。一部抜き出しました。

li.menu-item-has-children ul に対して、座標:top や透明度:opacity を設定しています。visibility プロパティで hidden を指定しているのだからいらないじゃないかと思ったのですが、消してみるとアニメーション動作がめっちゃ不自然になりました。試しに消して動作確認してみてください。

そして地味に手こずったのがリンクの装飾です。a と a:hover を使ってリンクをカスタマイズするのは定番なのですが、一番最後の部分を消去すると挙動がおかしくなります。

入れ子になっている子要素にマウスが乗っている状態というのは、別の言い方をすると親要素の上からマウスが離れたということです。ここで上の記述がないと、hover の状態が解除されたとみなされて元の背景色に戻ってしまいます。

正直なところ、動作自体にはなにも問題ありません。ただ、操作したときの見た目が直感的でないと考えたので少しこだわってみました。これを探し当てるのに3時間もかかってしまいましたよ(遠い目

デザインカスタマイズの参考になれば幸いです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP