CSSでドロップダウンメニューを作る方法を初心者向けに解説

ドロップダウンメニューは、現代のWebサイトの多くに搭載されている定番機能です。カスタマイズ性の高いナビゲーションを実現できるため、ユーザーは目的のコンテンツへスムーズにたどり着けます。

HTMLに加えてCSSを活用すれば、メニューラベルにマウスカーソルを合わせたときだけ内容が表示されるドロップダウンメニューを作成できます。

この記事では、サンプルコードとともにCSSでドロップダウンメニューを作成する手順を解説します。最後まで読めば、自分でドロップダウンメニューを作るために必要な知識とコードがすべて手に入ります。

CSSによるドロップダウンメニューとは

実は、HTMLにはドロップダウンメニューを作成するための専用タグは用意されていません。

しかし、CSSを組み合わせれば、ユーザーがメニュー上にマウスカーソルを重ねたときにテキストやリンク一覧を表示するメニューを実現できます。そこで本記事では、HTMLとCSSの両方を活用してドロップダウンメニューを作っていきます。

ここでは、ある地元のバドミントンクラブから、クラブ情報をオンラインで発信するWebサイトの制作を依頼された場面を想定しましょう。このサイトには、クラブの紹介、歴史、入会方法などに関する複数のページが含まれます。

クラブ側からの要望は「マウスオーバーで表示されるドロップダウンメニューを作ってほしい」というものです。メニューには「Equipment(用具)」「Getting Started(はじめ方)」「Membership Information(会員情報)」の3ページへのリンクを表示し、ラベルは「New Members(新規会員)」とします。

ドロップダウンメニューの作成例

それでは、このドロップダウンメニューをどのように作成するのか、順番に見ていきましょう。

まずはHTMLで基本的なメニュー構造を作成します。使用するコードは以下の通りです。

<div class="menu">
	<button class="dropdown_button">New Members</button>
	<div class="content">
		<a href="equipment.html">Equipment</a>
		<a href="gettingstarted.html">Getting Started</a>
		<a href="membership.html">Membership Information</a>
	</div>
</div>

このコードでは、以下のような構成になっています。

• menuクラスを持つ<div>タグを作成し、メニュー全体のコードを格納
• 「New Members」というテキストが表示されるボタンを作成
• リンク一覧を表示するための新しい<div>を作成
• 3つの<a>タグで、用具・はじめ方・会員情報の各ページへのリンクを作成

このコードをブラウザで表示すると、次のようになります。

現時点ではスタイルを一切適用していないため、装飾のないプレーンなHTMLの状態で表示されています。続いて、バドミントンクラブのサイト向けにドロップダウンメニューをスタイリングするためのコードを見てみましょう。

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

.menu {
	display: inline-block;
	position: relative;
}

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

.content a {
	text-decoration: none;
	display: block;
	color: black;
	padding: 16px;
}

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

このコードを適用すると、緑色のボタンにマウスを重ねるとリンク一覧が下に展開される、完成形のドロップダウンメニューになります。それでは、コードの仕組みを詳しく分解して確認していきます。

dropdown_buttonクラスは、ドロップダウンボタンのスタイルを定義しています。ボタンの背景色を薄い緑(#90EE90)に設定し、文字色を白に変更。さらに10pxのパディングを追加し、フォントサイズを15pxに設定したうえで、枠線(border)を削除しています。

contentクラスは、ドロップダウンメニューの内容部分のスタイルを管理します。デフォルトでは非表示(display: none)となっており、背景色は薄いグレーです。また、最小幅(min-width)は150px、配置方法は絶対配置(position: absolute)が指定されています。さらにz-indexが1に設定されているため、ページ上の他の要素よりも手前に表示されます。

menuクラスは、メニュー全体のスタイルを定義しています。<div class="menu">タグの中身を、ページ上の他の要素との相対的な位置関係で配置(position: relative)し、display: inline-blockによってインラインブロックコンテナとして表示させています。

.content aスタイルは、ドロップダウンメニュー内のリンクの見た目を指定します。text-decoration: none; で下線を削除し、各リンクをブロック表示(display: block)にすることで、縦に並ぶリスト形式にしています。文字色は黒、パディングは16pxに設定しました。

コードの最後にある.content a:hoverルールは、ユーザーがメニュー内のリンクにマウスカーソルを重ねたときの動作を定義しています。この例では、リンクにホバーすると背景色が薄いグレー(#f7f7f7)に変わり、視覚的なフィードバックが得られます。

また、.menu:hover .contentというルールも指定しており、ユーザーがメニュー上にマウスカーソルを重ねている間だけ、メニューの内容がブロックとして表示される仕組みになっています。

CSSの:hoverセレクターの動作についてさらに深く学びたい方は、専用の解説ガイドも参考にしてみてください。

右側に開くドロップダウンメニューの作り方

先ほどの例では、画面左側に展開されるドロップダウンメニューを作成しました。しかし、レイアウトによってはメニューを画面右側に表示したいケースもあるでしょう。

その場合は、先ほどのコードに以下のCSSルールを追加するだけで対応できます。

.content {
	right: 0;
}

このルールを追加することで、ドロップダウンの内容が画面の右端に揃えて表示されるようになります。

まとめ

HTMLだけでもドロップダウンメニューの基本構造は作成できますが、CSSでスタイルを適用することで、完成度が高く見た目にも美しいメニューへと仕上げられます。

この記事では、バドミントンクラブのサイトを例に、HTMLとCSSでドロップダウンメニューを作成する方法を解説しました。紹介したコードを応用すれば、あなただけのオリジナルなドロップダウンメニューを自由に作成できるはずです。