アコーディオン、または多層化などとも呼ばれるそうです。メニュー項目が多い場合に、わかりやすく分類できて便利です。JavaScript や jQuery などで実現する方法もありますが、今回は CSS だけでカスタマイズする方法について解説します。
ドロップダウングローバルメニューの構造
グローバルメニューを実現するための方法はいくつかあると思いますが、一般的なのは ul タグと li タグを使う方法でしょうか。WordPress でもそうなっています。ドロップダウンしないグローバルメニューの場合、HTML は次のようになっています。
1 2 3 4 5 6 7 8 | <div class="navigation"> <ul> <li><a href="#">ベトナム料理</a></li> <li><a href="#">タイ料理</a></li> <li><a href="#">インドネシア料理</a></li> <li><a href="#">マレーシア料理</a></li> </ul> </div> |
ドロップダウンにしたければ ul と li を入れ子構造にするだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="navigation"> <ul> <li><a href="#">ベトナム料理</a></li> <li><a href="#">タイ料理</a></li> <li><a href="#">インドネシア料理</a></li> <li><a href="#">マレーシア料理</a> <ul> <li><a href="#">ナシ・ゴレン</a></li> <li><a href="#">アヤム・ペルチッ</a></li> <li><a href="#">イカン・アサム・ペダス</a></li> </ul> </li> </ul> </div> |
WordPressでの設定
静的 HTML サイトなどの場合には HTML を手打ちしなければなりませんが、WordPress であれば管理画面からの操作でドロップダウングローバルメニューを実現することができます。「外観」→「メニュー」に移動し、まずは必要なメニュー項目を作成しましょう。
ドロップダウンにしたければ、子項目にしたいメニューをドラッグ＆ドロップで移動し、入れ子構造にするだけで済みます。
デフォルトの設定で出力される HTML は次のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <DIV class="navigation"> <DIV class="menu-menu1-container"> <UL class="menu" id="menu-menu1"> <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-6" id="menu-item-6"><A href="http://#">てびち</A></LI> <LI class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7" id="menu-item-7"><A href="http://#">おもろ</A></LI> <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8" id="menu-item-8"><A href="http://#">塩焼き</A></LI> <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9" id="menu-item-9"><A href="http://#">塩ゆで</A> <UL class="sub-menu"> <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10" id="menu-item-10"><A href="http://#">aaa</A></LI> <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11" id="menu-item-11"><A href="http://#">bbb</A></LI> <LI class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12" id="menu-item-12"><A href="http://#">ccc</A></LI> </UL> </LI> </UL> </DIV> </DIV> |
ひとつ余分に div タグで囲まれていたり、ul タグにクラス属性が自動で割り振られたりしていますが、テーマの PHP ファイルを編集することができるのなら、出力 HTML をカスタマイズすることも可能です。以前記事にしましたので、よろしければこちらもどうぞ。
WordPressのカスタムメニューで複数のメニューを切り替えてみる | Naokix.net
デザインのカスタマイズ
次のような HTML をカスタマイズするとします。クラス属性については WordPress を意識しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <ul class="menu"> <li><a href="#">ベトナム料理</a></li> <li><a href="#">タイ料理</a></li> <li><a href="#">インドネシア料理</a></li> <li class="menu-item-has-children"> <a href="#">マレーシア料理</a> <ul> <li><a href="#">ナシ・ゴレン</a></li> <li><a href="#">アヤム・ペルチッ</a></li> <li><a href="#">イカン・アサム・ペダス</a></li> </ul> </li> </ul> |
CSS のサンプルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | /* 以下、共通部分 */ ul { list-style: none; } li { text-align: center; } a { display: block; color: #fff; text-decoration: none; } .menu { width: 1000px; margin: 0 auto; } .menu > li { float: left; width: 25%; height: 50px; line-height: 50px; } .menu::after { content: ""; display: table; clear: both; } /* 以下、ドロップダウン */ li.menu-item-has-children { position: relative; } li.menu-item-has-children ul { visibility: hidden; opacity: 0; position: absolute; top: 40px; width: 100%; -webkit-transition: all .2s ease; transition: all .2s ease; } li.menu-item-has-children:hover ul { visibility: visible; opacity: 1; top: 50px; } /* 下矢印 */ li.menu-item-has-children > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 0 15px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* 以下、リンク色 */ .menu li a { background: rgb(26, 30, 36); } .menu li a:hover { background: rgb(242, 105, 100); } .menu li ul li a { background: rgb(242, 105, 100); } .menu li ul li a:hover { color: #999; background: #ffff00; } .menu li:hover > a { background: rgb(242, 105, 100); } |
共通部分ですが、これはドロップダウンしないグローバルメニューとほぼ同じものです。ただし、ひとつだけ注意。li タグを float:left; で横並べにしていますが、これをクリアするにはいくつか方法があります。そのなかで、float で並べた要素の親要素に overflow:hidden; を指定する方法は使わないでください。
overflow プロパティは、領域内に収まりきらない内容をどのように処理するかを指定するプロパティです。ここで hidden を指定すると、文字通りはみ出した部分を表示しないことになるので、ドロップダウン部分を見ることができなくなってしまいます。
ドロップダウン部分についてですが、次のところで違和感をもったかもしれません。一部抜き出しました。
1 2 3 4 5 6 7 8 9 10 11 12 | li.menu-item-has-children ul { visibility: hidden; opacity: 0; position: absolute; top: 40px; } li.menu-item-has-children:hover ul { visibility: visible; opacity: 1; top: 50px; } |
li.menu-item-has-children ul に対して、座標：top や透明度：opacity を設定しています。visibility プロパティで hidden を指定しているのだからいらないじゃないかと思ったのですが、消してみるとアニメーション動作がめっちゃ不自然になりました。試しに消して動作確認してみてください。
そして地味に手こずったのがリンクの装飾です。a と a:hover を使ってリンクをカスタマイズするのは定番なのですが、一番最後の部分を消去すると挙動がおかしくなります。
1 2 3 | .menu li:hover > a { background: rgb(242, 105, 100); } |
入れ子になっている子要素にマウスが乗っている状態というのは、別の言い方をすると親要素の上からマウスが離れたということです。ここで上の記述がないと、hover の状態が解除されたとみなされて元の背景色に戻ってしまいます。
正直なところ、動作自体にはなにも問題ありません。ただ、操作したときの見た目が直感的でないと考えたので少しこだわってみました。これを探し当てるのに3時間もかかってしまいましたよ(遠い目
デザインカスタマイズの参考になれば幸いです。
Comment