响应式导航栏手机端转汉堡菜单的核心是“媒体查询+DOM结构切换+交互控制”，实现方式分纯CSS（checkbox hack）、CSS+JS（最常用）、现代CSS（:has()+toggle）及框架集成四类，各具适用场景与取舍。
响应式导航栏在手机端自动变成汉堡菜单，核心在于“媒体查询 + DOM结构切换 + 交互控制”，常见实现方式有纯CSS、CSS+少量JavaScript、以及借助前端框架三种路径。关键不在于用哪种技术，而在于如何让小屏下菜单收起、点击展开、再点击收起的逻辑清晰可靠。
纯CSS实现（无JS，依赖checkbox hack）
利用隐藏的checkbox和label模拟开关状态，通过:checked伪类控制菜单显隐。适合静态导航、对JS依赖敏感的场景。
- HTML中把导航包裹在nav内，顶部放一个input type="checkbox"（设为display: none），再用label关联它作为汉堡图标
- CSS里用@media (max-width: 768px)把原导航项设为flex-direction: column并display: none；当input:checked ~ nav ul时，改为display: flex
- 优点是零JS、SEO友好；缺点是无法监听关闭动作、不支持过渡动画中断、可访问性稍弱（需加aria-expanded等辅助属性）
CSS + 原生JavaScript（最常用、可控性强）
结构保持语义化HTML，用JS监听点击事件切换类名，CSS负责样式响应。兼顾兼容性、可维护性和交互细节。
- 给汉堡按钮加data-toggle="nav"，导航容器加class="nav-menu"，默认在小屏下display: none
- JS中获取按钮和菜单元素，绑定click事件，用classList.toggle("active")切换状态，同时更新aria-expanded值
- 建议加上键盘支持：监听Escape键关闭菜单，菜单展开时聚焦首个链接，提升可访问性
使用现代CSS特性（如 :has() + toggle()）
Chrome 105+、Safari 15.4+ 支持:has()选择器，配合toggle()函数（实验性）可进一步减少JS。但目前仍属前沿方案，生产环境需谨慎。
- 例如：nav:has(.hamburger[aria-expanded="true"]) .nav-list { display: flex; }，配合按钮点击时用JS设置aria-expanded
- 优势是逻辑更贴近“样式即状态”，避免JS频繁操作DOM；劣势是浏览器支持有限，需降级处理（比如回退到传统JS切换）
- 适合渐进增强项目，主逻辑仍用JS保底，新特性仅作优化层
框架集成方案（React/Vue/Bootstrap）
若项目已用前端框架，直接复用生态内的响应式导航组件更高效，重点是理解其内部机制而非重复造轮子。
- React中可用useState管理isMenuOpen状态，配合useEffect监听窗口大小变化做自动收起
- Vue中用v-if或v-show控制菜单渲染，配合@click.stop避免事件冒泡误关
- Bootstrap 5自带.navbar-toggler和.navbar-collapse，只需引入JS bundle即可运行，但需注意CDN加载顺序和data-bs-*属性规范
