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: #040008;
    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;
}
nav{
    background-color: #017575;
}
.links,.links-hidden{
    display: inline-block;
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
}
.links-hidden{
    display: block;
}
.links{
    display: inline-block;
}
.links-hidden:hover,.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>
<nav>
<a class="links" href="#">HOME</a>
<a class="links" href="#">EMPLOYEES</a>
<a class="links" href="#">CAREER</a>
<div class="dropdown-menu">
<button class="menu-btn">Open <</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
</nav>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、次のようなナビゲーションバーが表示されます。

CSSだけで作る！ドロップダウンナビゲーションバーの実装方法

続いて、「Open」ボタンにマウスカーソルを合わせると、隠れていたメニューが展開され、次のように表示されます。

CSSだけで作る！ドロップダウンナビゲーションバーの実装方法

仕組みの解説

このドロップダウンメニューは、主に以下のCSSテクニックによって実現されています。

  • display: none と display: block の切り替え
    メニュー本体（.menu-content）は普段は display: none で非表示にしておき、親要素（.dropdown-menu）にホバーした瞬間に display: block へ切り替えて表示します。
  • position: relative と absolute の組み合わせ
    親要素に relative、メニューに absolute を指定することで、ボタンの真下にメニューを重ねて配置できます。
  • z-index による重なり順の制御
    z-index: 1 を指定することで、ページの他のコンテンツより手前にメニューが表示されるようにしています。
  • :hover での背景色変化
    ボタンやリンクにホバーした際に背景色を変えることで、クリックできる要素であることを視覚的に伝え、操作性を高めています。

この手法ならスクリプト不要で軽量に動作するため、シンプルなサイトのグローバルナビゲーションなどに最適です。スマートフォン対応が必要な場合は、タップでも開閉できるようJavaScriptを組み合わせるか、チェックボックスを使ったCSSオンリーのハンバーガーメニュー方式を検討するとよいでしょう。

  1. CSSだけで作る！レスポンシブ対応のセクションカウンターの実装方法

    CSSを使えば、JavaScriptに頼ることなく、ダウンロード数やパートナー数などの統計情報を視覚的にアピールする「セクションカウンター」を簡単に作成できます。ここでは、Font Awesomeのアイコンと組み合わせて、レスポンシブ対応のセクションカウンターを実装する方法を解説します。 実装コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <l

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {