推荐用<input type="checkbox">配合<label>和<nav>实现纯CSS汉堡菜单：input需有id且不可display:none，label用for关联并含图标，nav紧随input后以便用:checked + nav控制显隐，配合伪元素与transition实现三条线旋转动画，移动端需处理点击延迟、滚动穿透及iOS Safari兼容性问题。
汉堡菜单的HTML结构怎么写才方便CSS控制
纯CSS实现的前提是HTML足够简洁、语义清晰，且能被CSS精准选中。推荐用 <input type="checkbox"> 配合 <label> 和 <nav> 的组合——它不依赖JS，又能天然触发状态切换。
关键点在于：input 必须放在 label 前（或用 for 关联），且 nav 要紧随 input 后，这样才能用 ~ 或 + 选择器控制显示隐藏。
-
<input id="menu-toggle" type="checkbox">必须有id，且不可设display: none（否则iOS Safari会忽略点击） -
<label for="menu-toggle">里放汉堡图标（可用伪元素或SVG），点击即触发勾选 -
<nav>紧跟input，用input:checked + nav控制展开
用CSS控制汉堡图标动画的关键属性
图标动画本质是三条横线的旋转、位移和透明度变化，不能只靠 transform，必须配合 transition 和精确的起止状态定义。
常见错误是直接对 label::before / ::after 做 transform，结果三条线动得不一致——正确做法是把三条线统一用 label 的伪元素 + span 子元素模拟，或用单个 label 的背景+伪元素组合。
立即学习“前端免费学习笔记（深入）”；
- 三条线建议用
label的::before、::after和自身line-height形成中间线 - 收起态：三条线水平平行，间距固定；展开态：上线下旋、下线上旋、中间线透明，全部转为
45deg斜线形成 × - 必须给
label设transition: all 0.3s ease，且input:checked + label中重置 transform 和 opacity
移动端适配中最容易被忽略的交互细节
纯CSS菜单在真机上常出现“点一下没反应”“点两次才生效”“滑动页面时菜单意外关闭”等问题，根源不在样式，而在事件穿透和焦点管理。
iOS Safari 对 label 的点击响应有延迟（约300ms），且若 nav 内容高度超出视口，滚动时可能触发 focus/blur 导致 checkbox 自动取消勾选。
- 给
label加cursor: pointer和-webkit-tap-highlight-color: transparent消除点击反馈干扰 -
nav必须设position: fixed或absolute，避免文档流影响布局，同时加overflow-y: auto支持内部滚动 - 禁止 body 滚动：用
input:checked ~ body不可行（CSS无法向上选中），改用input:checked触发时 JS 切换 class（这是唯一需轻量JS的地方）；若坚持纯CSS，可将html设overflow: hidden，但需注意 iOS Safari 的 viewport 行为
不同浏览器对 :checked 选择器的支持差异
现代浏览器基本都支持 :checked + 相邻/兄弟选择器，但老版本 Android Browser（4.3 及更早）和部分微信内置浏览器（X5内核 v3.x）存在兼容问题：勾选后样式不更新，或动画卡顿。
这不是写法错误，而是渲染引擎对表单控件状态监听的实现缺陷。没有完美绕过方案，只能降级处理。
- Android 4.3 及以下：用
@supports (pointer: coarse)检测触屏设备，fallback 为默认展开的垂直菜单 - 微信 X5 内核：避免使用
transform: rotate()动画，改用top/opacity过渡，更稳定 - 所有场景下，确保
input有tabindex="0"，键盘用户也能操作（无障碍必需）
纯CSS汉堡菜单能做到 95% 场景可用，但真要兼顾所有低端机型和旧内核，还是得预留一行 JS fallback —— 不是技术做不到，而是某些浏览器根本没按标准解析 :checked。
