Com2 Blog

翻訳とWeb制作を基礎から分かりやすく学ぶ

CSSでドロップダウンメニューを作ってみる(シングルと多階層)

drop-down-menu

CSSを使ったドロップダウンメニューの作り方を3段階でまとめます。(1)ドロップダウンのないベースとなるメニュー、(2)2階層目までのドロップダウンメニュー、(3)3階層目までのドロップダウンメニュー。3階層までできれば、それ以上の階層も同様に作成できます。

しろうとの私の備忘録的なものでもあり、HTMLもCSSも、シンプルにすることを心がけました。

今回ご紹介するナビゲーションの基本設定

HTML構造は「nav」「ul」「li」しか使っていません。1つのWebページで複数のナビゲーションを使用する場合は、divやclassで使い分けてください。

widthは600pxとしています。ドロップダウンメニューの作りをご覧いただくためです。スマートフォンなど画面の小さなデバイスで見ると横スクロールバーが表示され扱いにくいかもしれませんがご了承ください。

パターン(1)ドロップダウンのないベースとなるメニュー

まずはベースとなるメニュー。ドロップダウンなしです。これは説明不要ですね。HTMLもこの上なくシンプルで、CSSも取り立ててテクニックを使っていません。ホバーした場合に背景と文字の色を変えているくらいです。

See the Pen Base Menu by Com2 (@Com2) on CodePen.

これをベースに、HTMLとCSSそれぞれに子メニューや孫メニューを追記していきましょう。

パターン(2)2階層のドロップダウンメニュー

See the Pen Drop-down Menu (2-level) by Com2 (@Com2) on CodePen.

パターン(1)のベースとの違いとポイントを見ていきましょう。

positionで子メニューの位置を指定

親メニューに「position: relative;」、子メニューに「position: absolute;」を指定しています。親メニューを基準にした絶対位置で子メニューの表示位置を指定するためです。

子メニュー「nav ul li ul」の表示位置「top: 100%;」は親メニューの高さを確保しています。「left: 0;」は子メニューの左端を親メニューの左端にそろえるための指定です。これで子メニューを親メニューの真下に表示しています。

z-index

ブロックレベル要素は後に記述したものが前面に表示されます。グローバルナビゲーションの次にメインコンテンツを記述する場合、グローバルナビゲーションの子メニューは後に記述されるメインコンテンツの後ろに隠れてしまいます。

z-indexを記述すると、その数値の大きいものが前面に表示されるためこの問題を回避できます。ここでは数値を100としていますが、任意で構いません。

子メニューのheight: 0;とheight: 40px;

子メニュー「nav ul li ul li」で「height: 0;」を指定しています。高さをゼロにする、つまり非表示にしているのです。

次に「nav > ul > li:hover > a」で「height: 40px;」を指定しています。親メニューにマウスオーバーした時に子メニューは高さ40pxで表示されます。

li:hover

「a:hover」ではなく「li:hover > a」としています。「li:hover」とすることで、子メニューにマウスオーバーしているとき、その親メニューの背景色も変えたまま保持できます。

子メニューにマウスオーバーしているとき、親メニューの背景色を無効にしたい(戻したい)場合は「li:hover > a」を「li > a:hover」とします。

子メニューがある場合の親メニューに下向き矢印

「nav ul li ul:before」で、子メニューがある場合にのみ親メニューに下向き矢印を表示させています。子メニューのリスト(nav ul li ul)の前(before)に対する設定です。

パターン(3)3階層のドロップダウンメニュー(多階層)

See the Pen Drop-down Menu (3-level) by Com2 (@Com2) on CodePen.

パターン(2)の2階層のドロップダウンメニューとの違いとポイントを見ていきましょう。(基本的には2階層の考え方と変わりありません。)

孫メニューの表示位置

まずは孫メニューの位置「nav ul li ul li ul」の指定です。「top: 0;」は孫メニューの上端を子メニューの上端にそろえるため指定です。「left: 100%;」は子メニューの幅を確保しています。これにより孫メニューを子メニューの右側に表示します。

次に子メニューの最後のアイテム(右端のアイテム)に対する指定です。「nav ul li:last-child ul li ul」として最後のアイテムだけ別で指定しています。「left: -100%;」とすることで、子メニューの最後のアイテムの場合のみ孫メニューをその左側に表示します。

z-index

子メニューでは数値を100としましたが、孫メニューは200にしてみました。任意でいろいろ試してみてください。

親メニューに表示される下向き矢印の記述をちょっと変更

パターン(2)では「nav ul li ul:before」で、子メニューがある場合の親メニューに下向き矢印を表示させました。このパターン(3)では「nav > ul > li > ul:before」とします。孫メニューと区別するためです。

孫メニューがある場合の子メニューに横向き矢印

「nav ul li ul li ul:before」で、孫メニューがある場合にのみ子メニューに右向き矢印を表示させています。

子メニューの最後のアイテム配下にある孫メニューは子メニューの左に表示するようにしました。そのため「nav ul li:last-child ul li ul:before」のみ左向き矢印にしています。

まとめ

ドロップダウンメニューを作成するにあたり、Webparkさんの「CSSだけで作る「多階層」なドロップダウンメニュー」を主に参考にさせて頂きました。大変勉強になりました。ありがとうございます。

今度はメガメニューも作れるようになりたいなと思っています。


コメント

コメントを残す