How to create a hamburger menu ハンバーガーメニューの作り方
Mobile-friendly fullscreen menu with animated toggle icon. モバイル向けフルスクリーンメニューとアニメーションアイコン。
ライブデモ Live Demo
Content area...
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Mobile-friendly fullscreen menu with animated toggle icon.
モバイル向けフルスクリーンメニューとアニメーションアイコン。
どこで使うかWhere to use
website header, dashboard sidebar, mobile menu, admin panel
モバイルヘッダーナビ、レスポンシブサイト、ポートフォリオサイト、ランディングページ
特徴Key features
Hamburger icon button that morphs into an × on open. Full-screen or drawer overlay navigation panel. Smooth slide/fade animation. Focus trap while open. Escape key and backdrop click to close.
オープン時に×に変形するハンバーガーアイコンボタン。フルスクリーンまたはドロワーオーバーレイナビゲーションパネル。スムーズなスライド/フェードアニメーション。オープン中のフォーカストラップ。Escapeキーとバックドロップクリックで閉じる。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--menu-bg | — | Menu background color |
--menu-text | — | Menu text color |
実装コード Implementation Code
<button class="hamburger" onclick="this.classList.toggle('active'); document.getElementById('menu').classList.toggle('open');">
<span></span><span></span><span></span>
</button>
<nav id="menu" class="mobile-menu">...</nav>:root { --menu-bg: #fff; --menu-text: #1d2242; }
.hamburger span { transition: 0.3s; position: absolute; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 15px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); top: 15px; }
.mobile-menu { background: var(--menu-bg); transform: translateY(-100%); transition: 0.4s; }
.mobile-menu.open { transform: translateY(0); }
.menu-link { color: var(--menu-text); }import { useState } from 'react';
import './N-009.css';
export default function HamburgerMenu({ links = [] }) {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button className={`hamburger ${isOpen ? 'active' : ''}`} onClick={() => setIsOpen(!isOpen)}>
<span /><span /><span />
</button>
<nav className={`mobile-menu ${isOpen ? 'open' : ''}`}>
{links.map((link, i) => (
<a key={i} href={link.href} className="menu-link" style={{ transitionDelay: `${i * 0.1}s` }}>
{link.label}
</a>
))}
</nav>
</>
);
}/* N-009: React styles */
.hamburger {
position: relative;
width: 32px;
height: 32px;
cursor: pointer;
background: none;
border: none;
z-index: 20;
}
.hamburger span {
transition: 0.3s;
position: absolute;
left: 0;
width: 24px;
height: 2px;
background: #1d2242;
}
.hamburger span:nth-child(1) {
top: 8px;
}
.hamburger span:nth-child(2) {
top: 15px;
}
.hamburger span:nth-child(3) {
top: 22px;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg);
top: 15px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg);
top: 15px;
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #fff;
z-index: 10;
padding-top: 80px;
transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
align-items: center;
}
.mobile-menu.open {
transform: translateY(0);
}
.menu-link {
font-size: 20px;
font-weight: 600;
text-decoration: none;
color: #1d2242;
margin: 16px 0;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.mobile-menu.open .menu-link {
opacity: 1;
transform: translateY(0);
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
Three <span> bars animate into an × using CSS transform (rotate and translateY) when an open class is applied. The nav panel slides in from the left (or top) via translateX transition. A JS focus trap cycles Tab/Shift+Tab within the open menu. body overflow: hidden prevents background scroll.
3つの<span>バーがopenクラス適用時にCSS transform（rotateとtranslateY）を使用して×にアニメーション。ナビパネルがtranslateXトランジションで左（または上）からスライドイン。JSフォーカストラップが開いているメニュー内でTab/Shift+Tabを循環。body overflow:hiddenが背景スクロールを防止。
カスタマイズ方法Customization
Change the panel animation from slide-left to slide-down for a top drawer variant. Add a semi-transparent backdrop behind the panel. Include social icons or a language switcher at the bottom of the nav panel.
パネルアニメーションをスライド左からスライド下に変えてトップドロワーバリアントに。パネルの後ろに半透明バックドロップを追加。ナビパネルの下部にソーシャルアイコンや言語切り替えを追加。
注意点Caveats
Add aria-label="Open menu" / "Close menu" to the button and update it dynamically. When the menu closes, return focus to the hamburger button. Test that the focus trap does not trap screen reader virtual cursor — use aria-modal="true" on the panel.
ボタンにaria-label="メニューを開く"/"メニューを閉じる"を追加して動的に更新してください。メニューが閉じるときハンバーガーボタンにフォーカスを戻してください。フォーカストラップがスクリーンリーダーの仮想カーソルをトラップしないようテスト — パネルにaria-modal="true"を使用してください。
よくある質問 Frequently Asked Questions
How to customize the hamburger menu? Hamburger Menuをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the hamburger menu in React? ReactでHamburger Menuを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of hamburger menu? Hamburger Menuのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.