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

HTMLとCSSだけで作るメガメニュー（全幅ドロップダウンナビゲーション）の実装方法

メガメニューとは、ナビゲーションバー上のボタンをホバーした際に、画面幅いっぱいに展開されるドロップダウンメニューのことです。通常のドロップダウンと違い、複数カラムのリンクや見出しをまとめて表示できるため、情報量の多いサイトのグローバルナビゲーションに適しています。

本記事では、JavaScriptを使わず、HTMLとCSSのみでメガメニューを実装する方法を解説します。ポイントは、ドロップダウン部分をposition: absolute＋width: 100%＋left: 0で画面全体に広げ、親要素のホバー時にdisplay: blockへ切り替える点です。

サンプルコード

以下が、HTMLとCSSを使用してメガメニューを作成するコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}
*,*::before,*::after{
    box-sizing: border-box;
}
nav {
    overflow: hidden;
    background-color: rgb(2, 161, 127);
    font-family: Arial, Helvetica, sans-serif;
}
nav a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .megaButton {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}
nav a:hover, .dropdown:hover .megaButton {
    background-color: rgb(0, 63, 146);
}
.megaContent {
    text-align: center;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    z-index: 1;
}
.megaContent .megaHeader {
    background: rgb(119, 6, 194);
    padding: 16px;
    color: white;
}
.dropdown:hover .megaContent {
    display: block;
}
.megaColumn {
    float: left;
    width: 50%;
    padding: 10px;
    background-color: rgb(233, 255, 198);
    height: 250px;
}
.megaColumn .links {
    color: black;
    padding: 16px;
    margin:10px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-bottom: 4px solid rgb(69, 0, 90);
}
.megaColumn a:hover {
    background-color: lightblue;
}
/*Float reset trick for clearing floats*/
.megaRow:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">ホーム</a>
<a class="links" href="#">会社概要</a>
<a class="links" href="#">お問い合わせ</a>
<a class="links" href="#">詳細情報</a>
<div class="dropdown">
<button class="megaButton">プロジェクト &gt;</button>
<div class="megaContent">
<div class="megaHeader">
<h2>プロジェクトメニュー</h2>
</div>
<div class="megaRow">
<div class="megaColumn">
<h3>商用プロジェクト</h3>
<a class="links" href="#">プロジェクト 1</a>
<a class="links" href="#">プロジェクト 2</a>
</div>
<div class="megaColumn">
<h3>非商用プロジェクト</h3>
<a class="links" href="#">プロジェクト 1</a>
<a class="links" href="#">プロジェクト 2</a>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力になります。

HTMLとCSSだけで作るメガメニュー（全幅ドロップダウンナビゲーション）の実装方法

「プロジェクト」ボタンにマウスカーソルを合わせると、画面幅いっぱいにメガメニューが展開されます。

HTMLとCSSだけで作るメガメニュー（全幅ドロップダウンナビゲーション）の実装方法

コードのポイント解説

  • .megaContent の全幅指定： position: absolute と left: 0、width: 100% を組み合わせることで、ドロップダウン部分がブラウザの左端から右端まで広がります。また z-index: 1 により、他のコンテンツより手前に表示されます。
  • ホバーでの表示切替： 通常時は display: none で非表示にし、.dropdown:hover .megaContent { display: block; } によってボタンにホバーした瞬間にメニューを開きます。JavaScript不要で動作します。
  • 2カラムレイアウト： .megaColumn に float: left と width: 50% を指定することで、メニュー内を左右2列に分割しています。
  • floatの解除： .megaRow:after の clearfix テクニックで float を解除し、レイアウト崩れを防いでいます。

この仕組みを応用すれば、カラム数の変更や画像の追加なども自由に行えます。ぜひ自分のサイトのデザインに合わせてカスタマイズしてみてください。

  1. HTMLとCSSでログインフォームを内蔵したレスポンシブナビゲーションメニューを作成する方法

    Webサイトのナビゲーションバーにログインフォームを組み込みたいケースは多くあります。HTMLとCSSだけでも、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなナビゲーションメニューを作成できます。この記事では、ナビゲーションリンクとユーザー名・パスワード入力欄を1つのバーに配置し、画面が狭くなると縦積みレイアウトに変化する実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=wi

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

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