グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



JavaScript不要!CSSだけで出来るドロップダウンメニューの実装方法

webサイトを作成しているとドロップダウンメニューの設置をすることがよくあります。
メニューがグローバルナビゲーションに収まりきらない場合や、階層が多いサイトなどで重宝する形式です。
今回はこのドロップダウンメニューをCSSのみで実装する方法をご紹介いたします。

ドロップダウンメニューとは

ドロップダウンメニューとは、メニューのタイトル部分をクリックもしくはホバーしたときに、下に垂れ下がるようにして表示されるメニューのことです。

今回実装するのは、弊社サイトでも採用しているような、グローバルナビゲーション(以下Gナビ)に付随するような形で用いられるドロップダウンメニューです。
該当するGナビタイトルにマウスホバーすると、その下にドロップダウンメニューが表示され、該当のGナビタイトルもしくはドロップダウンメニューからマウスが離れると非表示になるという仕様で実装していきます。

Gナビ部分の実装

ではここからは実際にコーディングを見てみましょう。
まずはGナビ部分を実装します。

 display: flex; を用いて横に並べ、リンクでもあるのでaタグで設置しています。
また今回はメニューの境目を分かりやすくするために擬似要素でラインを配置しました。
さらにホバーしたときに背景色とフォントカラーを変更して変化が分かるように設定してあります。

ドロップダウンメニュー部分の実装

先ほど作成したGナビに、ドロップダウンメニューを追加します。

まずはHTMLから見ていきます。

上記のようにドロップダウンメニューの記述をしていきます。
ポイントは設置したいGナビタイトルのaタグと同じ階層に記述するということ。
これにより、該当のGナビタイトルにホバーした際にその中のドロップダウンメニューが表示されます。

次にCSSの記述です。

ドロップダウンメニューをラップする要素(上記では dropdown__lists )を position: absolute; で上からGナビの高さの位置に配置しておくことで、該当のGナビタイトルのすぐ下に表示されるようになります。
そして、Gナビタイトルにホバーした際に表示する仕様を実装するため、デフォルトでは display: none; で隠しておいて、 gnavi__list にホバーすると display: block; で表示させる点もポイントです。

Gナビタイトルにホバーするとドロップダウンメニューが表示されることが確認出来ます。
また、Gナビタイトルおよびドロップダウンメニューからマウスが外れると、ドロップダウンメニューは非表示になることも確認できます。

表示時のアニメーションを追加する

仕様上はここまでの実装で問題ありませんが、さらにもうひと手間加えます。

ドロップダウンメニューの表示がやや唐突に感じるので、アニメーションを加えてみましょう。
 display: block;  display: none; で表示非表示を設定していた dropdown__lists の記述を変更します。

アニメーションの候補としては以下の2種類を想定します。
ひとつはフェードでふわっと表示されるアニメーション。もうひとつは上から下に表示されるアニメ―ションです。

まずはフェードで表示されるアニメーションを実装してみましょう。

 transition を使って、対象の要素が変化する時間を指定します。 display:none; では transition が機能しないので、代わりに visibility を使用して表示非表示を切り替えています。
そして opacity によって透明度を変化させれば、フェードアニメーションが実装出来ます。

ふわっと表示され、ふわっと消えることが確認できます。

次に上から下に表示されるアニメーションも実装してみましょう。
先ほどのフェードと同じ要領でCSSを変更します。

transitionで変化時間を指定するのは先ほどと同じですが、今度は transformのscaleY() を使用します。
 scaleY(0) で非表示状態、 scaleY(1) で表示状態としています。実際には常に表示されている状態ですが、Y方向の倍率をゼロとすることで実質非表示と同じ状態となります。
また変形における原点を左右方向中央、上下方向一番上とすることで、要素の一番上を基準に変形させることができます。

これで、上から下に出てきて、下から上に消えるアニメーションが完成しました。

さいごに

今回はCSSをだけでドロップダウンメニューを実装する方法を紹介いたしました。
JavaScriptで実装するよりもメンテナンス性に優れているほか、読み込みや挙動も軽くなるかと思います。

この記述を応用すれば、画面幅いっぱいに広がるメガメニューや、多階層のドロップダウンメニューなどもCSSだけで実装できますので、ぜひ活用してみてください。

The following two tabs change content below.

加藤 陵二

ソリューション事業部 webデザイナー
アーティスへ入社後、webデザイナーとして大学サイトや病院サイト、企業サイト等のデザイン・コーディングに携わる。資格:Photoshopクリエイター能力認定試験スタンダード、illustratorクリエイター能力認定試験エキスパート、Webクリエイター能力認定試験初級
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします