hambuger-menu

用途

Hamburger Menu（汉堡菜单）是一种由三条横线（☰）组成的图标，用于切换隐藏的导航面板，主要面向移动端和小屏幕设备。点击或轻触图标会展开站点导航，关闭时再次隐藏。该模式在小视口中节省屏幕空间，同时通过一个被广泛识别的交互入口保持完整导航的可访问性。

适用场景

横向空间有限的移动端或响应式网站
导航项较多、无法在小屏幕上单行排列的站点
模仿原生移动应用模式的渐进式 Web 应用
桌面导航菜单的响应式改造
导航项众多的管理后台或复杂应用

不适用场景

仅有 3-4 个导航项、可舒适放入可见栏的站点
屏幕空间充裕的桌面专用应用
信息亭或大屏界面，可发现性至关重要
主要用户任务依赖导航可见性的页面（如对比工具）
分析数据显示用户很少找到或使用隐藏菜单的情况

实现流程

在复制示例前，确认该模式与问题和约束匹配。
从 references/pattern.md 中的结构和示例入手，选择最小可行的变体。
在叠加视觉打磨之前，先应用无障碍、性能和交互防护措施。
使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。

无障碍防护

应做：

使用 <button> 元素并配合 aria-expanded 和 aria-controls
在打开的面板内限制焦点，使 Tab 仅在菜单项间循环
按 Escape 键关闭菜单并将焦点返回切换按钮
在切换按钮上使用 aria-label 描述当前操作（“Open menu” / “Close menu”）
通过 aria-expanded 向屏幕阅读器播报状态变化

不应做：

不要使用 <div> 或 <span> 作为切换元素
不要让焦点逃逸到打开的遮罩后方
不要移除菜单链接的可见焦点指示

性能防护

目标指标：

切换响应：轻触/点击后视觉反馈 < 50ms
面板动画：250-300ms 滑动时长，保持 60fps
首次可交互：切换后菜单应在 100ms 内可交互
包体大小：汉堡组件含样式 < 3KB（无重型依赖）
绘制成本：仅使用 transform/opacity 实现 GPU 加速动画

优化策略（纯 CSS 切换，渐进增强）：

/* Use :has() or checkbox hack for no-JS base */
.nav-panel { transform: translateX(-100%); }
.hamburger-toggle[aria-expanded="true"] ~ .nav-panel {
  transform: translateX(0);
}

常见错误

在桌面端使用汉堡菜单

问题：在大屏幕上将导航隐藏在汉堡图标后，会降低可发现性并强制不必要的点击。

修复：仅在响应式断点以下（通常为 768px 或 1024px）使用汉堡模式。桌面端显示完整导航。

缺少焦点管理

问题：菜单打开时，焦点停留在切换按钮或移动到页面主体，使键盘用户陷入困境。

修复：打开时将焦点移至面板内第一个可聚焦元素。将焦点限制在面板内。关闭时将焦点返回切换按钮。

不支持 Escape 键

问题：键盘用户无法在不 Tab 到关闭按钮的情况下快速关闭菜单。

修复：监听 Escape 键并关闭菜单，将焦点恢复到切换按钮。

技能介绍

用途