햄버거 메뉴 데모
오른쪽 상단의 햄버거 아이콘을 클릭하여 전체 화면 메뉴를 열어보세요.
메뉴는 원형 확장 애니메이션과 함께 나타나며, 각 링크는 순차적으로 페이드인됩니다.
ESC 키를 누르거나 X 버튼을 클릭하여 닫을 수 있습니다.
4. 모바일 햄버거 메뉴
Create an animated hamburger menu with full-screen navigation:
**Hamburger Icon**:
- Size: 24x18px tap target: 44x44px (accessibility)
- 3 horizontal lines: 2px height, 24px width, 6px gap
- Animation to X: top/bottom rotate ±45deg, middle fade out
- Transition: 300ms cubic-bezier(0.4, 0, 0.2, 1)
**Overlay Menu**:
- Full viewport coverage with backdrop
- Background: white or brand dark color
- Entry animation: clipPath circle expand from hamburger position
- Exit: reverse animation
**Menu Content**:
- Nav links: 32px font, bold, stacked center
- Stagger animation: 50ms delay between items
- Each link slides up + fades in
- Active state: accent color underline
**Interaction**:
- Body scroll lock when open
- Click outside or X to close
- Escape key support
- Focus trap within menu
Tech: React + Framer Motion + @headlessui/react