JavaScriptとCSSで簡単に実装できるグローバルナビゲーションのメガメニュー

ナビゲーションバーにメガメニューを追加すると、多くの情報を整理して表示することができます。
特に、eコマースサイトや企業のウェブサイトでは、
複数のカテゴリやアイテムをコンパクトに表示できるメガメニューがよく使用されます。

この記事では、JavaScriptとCSSを使って、シンプルで機能的なメガメニューを作成する方法を解説します。
メガメニューがグローバルナビゲーションの全体に表示されるようにカスタマイズする手順も紹介します。

メガメニューとは？

メガメニューは、ナビゲーションメニューの1つであり、ユーザーが特定のメニュー項目にカーソルを合わせると、サブメニューが大きく表示される仕組みです。
一般的なドロップダウンメニューとは異なり、
複数のカテゴリやリンクが整理されて表示されるのが特徴です。

サンプルコードの概要

このセクションでは、シンプルなメガメニューの実装方法を説明します。
メニュー項目にホバーすると、ナビゲーションバー全体にメガメニューが表示され、
カテゴリごとにリンクを整理して表示します。

メガメニューの実装

まず、基本的なHTMLとCSS、そしてJavaScriptを使ってメガメニューを構築します。

HTML

HTMLでは、グローバルナビゲーションの基本構造を作ります。
<ul>タグでメニューのリストを定義し、各メニューアイテムにサブメニュー（メガメニュー）を追加します。

<nav class="global-nav">
    <ul>
        <li class="menu-item">
            <a href="#">メニュー1</a>
            <div class="mega-menu">
                <div class="menu-column">
                    <h3>カテゴリー1</h3>
                    <ul>
                        <li><a href="#">サブメニュー1-1</a></li>
                        <li><a href="#">サブメニュー1-2</a></li>
                        <li><a href="#">サブメニュー1-3</a></li>
                    </ul>
                </div>
                <div class="menu-column">
                    <h3>カテゴリー2</h3>
                    <ul>
                        <li><a href="#">サブメニュー2-1</a></li>
                        <li><a href="#">サブメニュー2-2</a></li>
                        <li><a href="#">サブメニュー2-3</a></li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="menu-item"><a href="#">メニュー2</a></li>
        <li class="menu-item"><a href="#">メニュー3</a></li>
    </ul>
</nav>

CSS

次に、CSSを使ってメガメニューのスタイルを定義します。
デフォルトではメガメニューは非表示にしておき、ホバー時に表示されるようにします。
また、メガメニューがナビゲーション全体に広がるようにwidth: 100%を設定しています。

.global-nav {
    background-color: #333;
}

.global-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    padding: 10px;
}

.global-nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

.menu-item {
    position: relative;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* ナビゲーション全体にメガメニューを広げる */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 20px;
}

.menu-column {
    width: 25%; /* カラム幅の調整 */
    float: left;
    padding: 10px;
}

.mega-menu a {
    color: #333;
    padding: 5px 0;
    display: block;
}

.mega-menu a:hover {
    color: #007bff;
}

.mega-menu::after {
    content: "";
    display: table;
    clear: both;
}

JavaScript

JavaScriptでは、メニュー項目にホバーした際にメガメニューが表示される仕組みを作ります。
mouseoverイベントでメガメニューを表示し、mouseoutイベントでメガメニューを非表示にします。

document.querySelectorAll('.menu-item').forEach(item => {
    item.addEventListener('mouseover', () => {
        const megaMenu = item.querySelector('.mega-menu');
        if (megaMenu) {
            megaMenu.style.display = 'block';
        }
    });

    item.addEventListener('mouseout', () => {
        const megaMenu = item.querySelector('.mega-menu');
        if (megaMenu) {
            megaMenu.style.display = 'none';
        }
    });
});

カスタマイズ方法

メガメニューの幅を調整

今回のサンプルでは、メガメニュー全体がナビゲーションに広がるようにwidth: 100%を設定していますが、特定の幅に固定したい場合はwidthを調整します。
また、カラム数やカラム幅もmenu-columnのwidthプロパティを変更することでカスタマイズ可能です。

.menu-column {
    width: 33.33%; /* 3カラム表示に変更 */
}

メニューのスタイルを改善

メニューのデザインやホバースタイルをカスタマイズするには、a:hoverなどのCSSセレクタを利用します。
また、メニューにアイコンを追加したり、背景画像を入れたい場合もCSSで追加できます。

まとめ

今回の記事では、JavaScriptとCSSを使って、
シンプルなグローバルナビゲーションのメガメニューを作成する方法を解説しました。
このメガメニューは、ナビゲーションバー全体に広がるため、
多くの情報を整理して表示する際に非常に便利です。

メガメニューの実装は、視覚的なナビゲーションを提供するための重要なテクニックですので、
自分のサイトに合ったカスタマイズを行ってみてください。

Favorite