2026年5月20日

WordPressのメガメニューを設定する方法

テーマ・デザイン

はじめに

メガメニューとは、ナビゲーションのドロップダウンが複数列・大型で表示されるUIです。WordPressでは Walker_Nav_Menu を拡張してメニュー項目にカスタムクラスを付け、CSSで大型パネルを表示する方法がプラグイン不要で実現できます。

症状・原因

子メニューが多く、通常のドロップダウンでは見づらい
メニューを複数列で表示したい
メガメニューのプラグインが重い・他のプラグインと競合する

解決手順

ステップ1：メニューにカスタムクラスを付ける（管理画面から）

1. 外観 → メニューを開く

2. 画面上部「表示オプション」→「CSSクラス」にチェック

3. メガメニューにしたい親メニュー項目を開いて「CSSクラス」に has-mega-menu を入力

4. 保存

ステップ2：CSSでメガメニューを実装する

/* ナビゲーション基本 */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu > li {
    position: relative;
}

/* 通常のドロップダウン */
.nav-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e2e4e7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}

/* メガメニュー: 全幅パネル */
.nav-menu > li.has-mega-menu {
    position: static; /* 親をstaticにしてビューポート幅を基準にする */
}

.nav-menu > li.has-mega-menu > .sub-menu {
    left: 0;
    right: 0;
    width: 100%;
    display: none;
    padding: 2rem;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* ホバー・フォーカス時に表示 */
.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu {
    display: block;
}

.nav-menu > li.has-mega-menu:hover > .sub-menu,
.nav-menu > li.has-mega-menu:focus-within > .sub-menu {
    display: grid; /* メガメニューはgridで表示 */
}

/* メガメニュー内のカラム */
.nav-menu > li.has-mega-menu .sub-menu > li {
    break-inside: avoid;
}

.nav-menu > li.has-mega-menu .sub-menu > li > a {
    display: block;
    font-weight: 700;
    color: #1d2327;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e2e4e7;
}

/* メガメニュー内の孫メニュー */
.nav-menu > li.has-mega-menu .sub-menu .sub-menu {
    display: block;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.nav-menu > li.has-mega-menu .sub-menu .sub-menu li a {
    font-size: 0.9rem;
    color: #50575e;
    padding: 0.2rem 0;
}

ステップ3：Walker_Nav_Menuでより細かく制御する

// functions.php
class My_Mega_Menu_Walker extends Walker_Nav_Menu {

    public function start_el(&$output, $data_object, $depth = 0, $args = null, $current_object_id = 0): void {
        $item = $data_object;

        // 深さ0（トップレベル）かつhas-mega-menuクラスを持つ場合
        if ($depth === 0 && in_array('has-mega-menu', $item->classes, true)) {
            $item->classes[] = 'mega-menu-parent'; // 追加クラス
        }

        parent::start_el($output, $data_object, $depth, $args, $current_object_id);
    }
}

// header.phpで使用
wp_nav_menu([
    'theme_location' => 'primary',
    'walker'         => new My_Mega_Menu_Walker(),
    'container'      => false,
    'menu_class'     => 'nav-menu',
]);

ステップ4：モバイル対応

@media (max-width: 768px) {
    .nav-menu > li.has-mega-menu > .sub-menu {
        display: none;
        grid-template-columns: 1fr; /* モバイルは1カラム */
        position: relative;
        width: 100%;
        box-shadow: none;
        border: none;
        padding: 0.5rem 1rem;
    }

    .nav-menu > li.has-mega-menu.is-open > .sub-menu {
        display: grid;
    }
}

注意事項

position: static を親要素に設定するとビューポート幅を基準にパネルが広がりますが、親が overflow: hidden だと機能しません
:focus-within の使用でキーボードアクセシビリティが確保できます。:hover だけでは不十分です
メガメニューは画像やウィジェットを含む複雑なレイアウトにも使えますが、管理画面のメニュー設定だけでは限界があるため、ウォーカーをカスタマイズして専用のHTMLを出力する方法が柔軟です

まとめ

管理画面でメニュー項目に has-mega-menu クラスを付け、CSSで position: static の親 + display: grid の子メニューを組み合わせるだけでプラグイン不要のメガメニューが実現します。Walker_Nav_Menu を継承すれば追加クラスや独自HTMLの出力も可能です。

Post Views: 15