ハンバーガーメニュー Hamburger Menu
三本線アイコンでメニューの開閉を制御する。モバイルで頻出。
ライブデモ
ソースコード
<div class="demo-hamburger">
<button class="demo-hamburger-btn" aria-label="メニューを開く" aria-expanded="false">
<span class="demo-hamburger-line"></span>
<span class="demo-hamburger-line"></span>
<span class="demo-hamburger-line"></span>
</button>
<nav class="demo-hamburger-nav" aria-hidden="true">
<a href="#" class="demo-hamburger-link">ホーム</a>
<a href="#" class="demo-hamburger-link">サービス</a>
<a href="#" class="demo-hamburger-link">料金</a>
<a href="#" class="demo-hamburger-link">お問い合わせ</a>
</nav>
</div>.demo-hamburger { position: relative; }
.demo-hamburger-btn {
display: flex; flex-direction: column; gap: 5px;
background: none; border: none; cursor: pointer; padding: 10px;
}
.demo-hamburger-line {
display: block; width: 28px; height: 3px;
background: var(--ui-primary); border-radius: 2px;
transition: transform 0.3s, opacity 0.3s;
}
.demo-hamburger-btn.active .demo-hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.demo-hamburger-btn.active .demo-hamburger-line:nth-child(2) {
opacity: 0;
}
.demo-hamburger-btn.active .demo-hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.demo-hamburger-nav {
display: none; flex-direction: column; gap: 4px;
margin-top: 12px; padding: 12px; border-radius: 8px;
background: color-mix(in srgb, var(--ui-primary) 8%, #fff);
border: 1px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-hamburger-nav.open { display: flex; }
.demo-hamburger-link {
padding: 8px 12px; text-decoration: none; color: #333;
border-radius: 6px; transition: background 0.2s;
}
.demo-hamburger-link:hover {
background: color-mix(in srgb, var(--ui-primary) 15%, transparent);
color: var(--ui-primary);
}document.querySelector('.demo-hamburger-btn').addEventListener('click', function() {
this.classList.toggle('active');
const nav = document.querySelector('.demo-hamburger-nav');
const isOpen = nav.classList.toggle('open');
this.setAttribute('aria-expanded', isOpen);
nav.setAttribute('aria-hidden', !isOpen);
});AIプロンプト
Basic
ハンバーガーメニューをHTML/CSSで作ってください。三本線のアイコンをクリックするとナビゲーションメニューが開閉します。
Custom
以下の仕様でハンバーガーメニューを実装してください。 - アニメーション付きのアイコン変形（三本線 → ×） - メニュー展開時はスライドイン（左から右へ） - メニュー背景にオーバーレイ表示 - プライマリカラー: #2563eb - メニュー項目にホバーエフェクト - 閉じるときはフェードアウト
Advanced
アクセシビリティ対応のハンバーガーメニューを実装してください。 - aria-expanded, aria-controls, aria-hidden を適切に設定 - フォーカストラップ（メニュー内でTabキーが循環） - ESCキーでメニューを閉じる - prefers-reduced-motion対応（アニメーション無効化） - スクリーンリーダー対応のラベル - メニュー展開時はbodyスクロールをロック - タッチデバイスでのスワイプ操作対応