メガメニュー Mega Menu
ナビの下に大きなパネルを開いてカテゴリごとにリンクを整理表示する。
ライブデモ
ソースコード
<div class="demo-mega-wrap"><nav class="demo-mega">
<ul class="demo-mega-bar">
<li class="demo-mega-item">
<button class="demo-mega-trigger">製品 ▾</button>
<div class="demo-mega-panel">
<div class="demo-mega-col">
<h4 class="demo-mega-heading">ソフトウェア</h4>
<a href="#" class="demo-mega-link">エディタ</a>
<a href="#" class="demo-mega-link">IDE</a>
<a href="#" class="demo-mega-link">ターミナル</a>
</div>
<div class="demo-mega-col">
<h4 class="demo-mega-heading">ハードウェア</h4>
<a href="#" class="demo-mega-link">キーボード</a>
<a href="#" class="demo-mega-link">マウス</a>
<a href="#" class="demo-mega-link">モニター</a>
</div>
<div class="demo-mega-col">
<h4 class="demo-mega-heading">サービス</h4>
<a href="#" class="demo-mega-link">クラウド</a>
<a href="#" class="demo-mega-link">サポート</a>
<a href="#" class="demo-mega-link">コンサル</a>
</div>
</div>
</li>
<li class="demo-mega-item">
<button class="demo-mega-trigger">会社情報</button>
</li>
<li class="demo-mega-item">
<button class="demo-mega-trigger">お問い合わせ</button>
</li>
</ul>
</nav></div>.demo-mega-wrap { min-height: 320px; position: relative; }
.demo-mega-bar {
display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
border-bottom: 2px solid #e5e7eb;
}
.demo-mega-item { position: relative; }
.demo-mega-trigger {
background: none; border: none; padding: 10px 18px; cursor: pointer;
font-size: 14px; font-weight: 600; color: #555;
border-bottom: 2px solid transparent; margin-bottom: -2px;
transition: color 0.2s, border-color 0.2s;
}
.demo-mega-trigger:hover,
.demo-mega-trigger.active {
color: var(--ui-primary);
border-bottom-color: var(--ui-primary);
}
.demo-mega-panel {
display: none; position: absolute; max-width: 100%; left: 0; right: 0; top: 100%; left: 0;
min-width: 420px; padding: 20px; margin-top: 2px;
background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
grid-template-columns: 1fr 1fr 1fr; gap: 20px; z-index: 10;
}
.demo-mega-panel.open { display: grid; }
.demo-mega-heading {
font-size: 12px; font-weight: 700; color: var(--ui-primary);
margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.demo-mega-link {
display: block; padding: 4px 0; font-size: 13px;
color: #555; text-decoration: none; transition: color 0.2s;
}
.demo-mega-link:hover { color: var(--ui-primary); }document.querySelectorAll('.demo-mega-trigger').forEach(btn => {
btn.addEventListener('click', function() {
const panel = this.nextElementSibling;
if (!panel || !panel.classList.contains('demo-mega-panel')) return;
const isOpen = panel.classList.toggle('open');
this.classList.toggle('active', isOpen);
document.querySelectorAll('.demo-mega-panel').forEach(p => {
if (p !== panel) { p.classList.remove('open'); p.previousElementSibling.classList.remove('active'); }
});
});
});
document.addEventListener('click', e => {
if (!e.target.closest('.demo-mega-item')) {
document.querySelectorAll('.demo-mega-panel').forEach(p => p.classList.remove('open'));
document.querySelectorAll('.demo-mega-trigger').forEach(b => b.classList.remove('active'));
}
});AIプロンプト
Basic
メガメニューをHTML/CSSで作ってください。ナビバーのボタンをクリックすると大きなドロップダウンパネルが開き、カテゴリ別にリンクが整理表示されます。
Custom
以下の仕様でメガメニューを実装してください。 - 3カラムのグリッドレイアウトでカテゴリを表示 - ホバー時にパネルを表示（200msのディレイ付き） - 各カラムに見出し + リンクリスト - プライマリカラー: #2563eb - パネルにドロップシャドウとボーダーラディウス - アイコン付きリンク（SVGアイコン使用）
Advanced
アクセシビリティ対応のメガメニューを実装してください。 - aria-haspopup, aria-expanded を適切に設定 - キーボード操作（矢印キーでカラム間移動、ESCで閉じる） - フォーカス管理（パネル内のフォーカストラップ） - prefers-reduced-motion対応 - レスポンシブ（モバイルではアコーディオン形式にフォールバック） - 外部クリックとESCで閉じる - スクリーンリーダー対応のランドマーク設定