导航栏移动端转汉堡菜单需结构不变、样式响应、交互可控：CSS媒体查询在768px断点切换显示，JS通过toggleClass控制active类及aria-expanded属性，确保所有导航项纳入同一折叠容器，可选纯CSS checkbox方案。
让导航栏在移动端自动变成汉堡菜单，核心是“结构不变、样式响应、交互可控”——不改 HTML 语义结构，靠 CSS 媒体查询控制显示状态，用轻量 JavaScript 管理展开/收起逻辑。
用媒体查询控制显示断点
在 CSS 中设定一个明确的断点（如 768px），让桌面端导航水平排列，移动端则隐藏主菜单、显示汉堡图标：
- 给导航容器（
nav）设display: flex，子项用flex: 1 1 auto防止撑破布局 - 汉堡图标（三道横线）用
div.bar+ 纯 CSS 绘制，初始display: none - 在
@media (max-width: 768px)内：隐藏原导航项，显示汉堡图标，并把菜单容器设为flex-direction: column; width: 100% - 注意加
min-width: 0到 flex 子项，避免 Safari 下长文字溢出
用 JavaScript 控制菜单开关
点击汉堡按钮时，只切换一个类名（如 active），由 CSS 控制显隐，不直接操作 display 或 style：
- 给按钮加
data-toggle="nav"，菜单容器加class="nav-menu" - JS 中获取两者，绑定
click事件，调用classList.toggle('active') - 同步更新
aria-expanded属性，提升可访问性 - 补充键盘支持：菜单展开时按
Escape键收起，首次展开后自动聚焦第一个链接
确保所有导航项都进入折叠区
常见问题是小屏下部分链接“消失”，根源在于结构没统一纳入折叠容器：
- 所有导航项（含原本独立放在
.navbar外的链接、下拉菜单项）必须包裹在同一个.navbar-collapse或自定义折叠容器内 - 移除小屏下冗余的“Show More”按钮，直接展平全部菜单项，避免二次点击
- 若用 Bootstrap，确认
data-bs-target指向的元素包含全部内容，且不被其他display规则覆盖
可选：纯 CSS 方案（无 JS）
适合静态站点或对 JS 加载敏感的场景，用 checkbox + label 模拟开关：
- HTML 中放一个隐藏的
<input type="checkbox" id="menu-toggle">和关联的<label for="menu-toggle">作为汉堡图标 - CSS 中用
#menu-toggle:checked ~ .nav-menu { display: flex; }控制菜单显示 - 优点是零 JS、SEO 友好；缺点是无法监听关闭动作、过渡动画中断后状态不同步，需手动补全
aria-expanded
