ドロップダウンメニューは、ユーザーがインタラクションを起こしたときに追加のオプションを表示するUIコンポーネントです。この記事では、CSSのpositionプロパティ、特にabsoluteを使用して、シンプルなドロップダウンメニューを作成する方法を解説します。
まず、基本的な構造とスタイルを定義します。親要素にposition: relativeを設定し、子要素であるドロップダウンメニューにposition: absoluteを適用することで、メニューを親要素の外に自由に配置できます。
<!doctype html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 300vh;
margin: 0;
background-color: #f4f4f4;
}
.menu-wrapper {
width: 85%;
max-width: 950px;
margin: 2em auto;
}
.menu-container {
display: inline-flex;
position: relative;
}
.menu-trigger {
padding: 0.6em 1.8em;
border: 1px solid #aaa;
background-color: #e0e0e0;
cursor: pointer;
user-select: none;
}
.menu-list {
display: none;
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border: 1px solid #ddd;
}
.menu-container:hover .menu-list {
display: block;
}
.menu-items {
padding: 0;
margin: 0;
list-style-type: none;
}
.menu-items > li {
border-bottom: 1px solid #eee;
}
.menu-items > li:last-child {
border-bottom: none;
}
.menu-link {
display: block;
padding: 0.7em 1.5em;
color: #333;
text-decoration: none;
transition: background-color 0.2s;
}
.menu-link:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="menu-wrapper">
<nav>
<div class="menu-container">
<div class="menu-trigger">メインメニュー</div>
<div class="menu-list">
<ul class="menu-items">
<li><a href="/" class="menu-link">ホーム</a></li>
<li><a href="/products" class="menu-link">製品一覧</a></li>
<li><a href="/services" class="menu-link">サービス</a></li>
<li><a href="/pricing" class="menu-link">価格</a></li>
<li><a href="/contact" class="menu-link">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
上記のコードは、ホバー時にメニューを表示する基本的な機能を実現します。しかし、ユーザー体験をさらに向上させるために、ドロップダウントリガーに三角形のアイコンを追加することが一般的です。これは、ユーザーに「クリック可能な要素である」という視覚的なヒントを与えます。
以下のコードを追加して、三角形のアイコンを実装します。今回は、::after疑似要素を使用し、borderプロパティで三角形を描画します。また、ホバー時にはアイコンを回転させるアニメーションを追加します。
.menu-trigger::after {
content: "";
position: absolute;
right: 1.2em;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #666;
transition: transform 0.2s ease;
}
.menu-container:hover .menu-trigger::after {
transform: translateY(-50%) rotate(180deg);
}
これにより、メニューが開くときに三角形が下向きから上向きにスムーズに回転する効果が加わり、インタラクティブな感じが生まれます。