CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで実装！ホバーすると開くドロップダウンメニューの作り方

CSSだけを使って、マウスホバー時に開くドロップダウンメニューを実装する方法を紹介します。JavaScriptに頼らず、:hover擬似クラスとdisplayプロパティを組み合わせることで、シンプルかつ軽量なドロップダウンメニューが作れます。

実装例

以下は、ボタンにカーソルを合わせるとメニューが展開されるドロップダウンメニューの完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.menu-btn {
    background-color: #7e32d4;
    color: white;
    padding: 16px;
    font-size: 20px;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
}
.dropdown-menu {
    position: relative;
    display: inline-block;
}
.menu-content {
    display: none;
    position: absolute;
    background-color: #017575;
    min-width: 160px;
    z-index: 1;
}
.links {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid black;
}
.links:hover {
    background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-content {
    display: block;
}
.dropdown-menu:hover .menu-btn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下のボタンにカーソルを合わせるとドロップダウンメニューが開きます</h2>
<div class="dropdown-menu">
<button class="menu-btn">メニューを開く</button>
<div class="menu-content">
<a class="links" href="#">お問い合わせ</a>
<a class="links" href="#">アクセス</a>
<a class="links" href="#">会社概要</a>
</div>
</div>
</body>
</html>

コードのポイント

  • メニューの非表示化：.menu-contentにdisplay: none;を指定し、通常時はドロップダウンの中身を隠します。
  • ホバーでの表示切替：.dropdown-menu:hover .menu-content { display: block; }により、親要素がホバーされた瞬間にメニューを表示します。
  • 位置関係の制御：親要素にposition: relative;、メニュー側にposition: absolute;を設定することで、ボタンの真下にメニューを重ねて表示できます。
  • 重なり順の調整：z-index: 1;を指定し、メニューが他のコンテンツより手前に表示されるようにしています。
  • 視覚的フィードバック：.links:hoverや.dropdown-menu:hover .menu-btnで背景色を変えることで、ユーザーに操作可能であることを直感的に伝えます。

出力結果

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

CSSだけで実装！ホバーすると開くドロップダウンメニューの作り方

「メニューを開く」ボタンにマウスカーソルを合わせると、以下のようにドロップダウンメニューが展開されます。

CSSだけで実装！ホバーすると開くドロップダウンメニューの作り方

まとめ

このように、CSSの:hover擬似クラスを活用すれば、JavaScriptを一切使わずに直感的に操作できるドロップダウンメニューが実現できます。グローバルナビゲーションやサイドバーなど、さまざまなUIに応用できる基本テクニックなので、ぜひ実際のサイト制作でも試してみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>