必须用input[type="checkbox"]作开关，因其:checked伪类是纯CSS捕获状态的唯一可靠方式；结构上input与nav须同级且nav紧随其后，隐藏input应使用position: absolute而非display: none，菜单显隐需用max-height过渡而非display切换，汉堡图标须用伪元素绘制并统一控制transform与opacity动画。
HTML结构必须用input[type="checkbox"]作开关，不能用div或button
纯CSS汉堡菜单的底层逻辑依赖状态捕获，input[type="checkbox"]是唯一能被:checked伪类稳定识别的原生控件。用div加onclick或button模拟，JS一断就完全失效，且屏幕阅读器无法感知状态切换。
关键结构约束有三点：
-
input必须有id，label的for属性必须与之严格匹配 -
input和nav需同级，且nav必须紧跟在input之后（或用~兄弟选择器能覆盖到） -
input不能设display: none，应改用position: absolute; left: -9999px隐藏，否则部分读屏器会跳过它
菜单展开不能靠display切换，得用max-height + overflow-hidden
display属性不可动画，直接切none↔flex会导致闪现、无过渡。正确做法是让nav始终在DOM中，仅控制其“视觉高度”。
实操要点：
- 默认设
max-height: 0; overflow: hidden; -
:checked ~ nav时设max-height: 360px（按8项×48px行高预估，留余量） - 过渡写在常态下：
transition: max-height 0.3s ease-in-out;，别只写在:checked里 - 若菜单含子菜单，子项也要单独配
max-height和opacity过渡，父级max-height只管容器高度
汉堡图标必须用span + ::before/::after绘制，禁用SVG或图片
用伪元素画三横线比引入外部资源更轻量，缩放不糊，也避免HTTP请求延迟。核心是让label > span为中线，两个伪元素生成上下线。
容易被忽略的细节：
- 所有参与图标的元素（
span、::before、::after）都要加user-select: none; pointer-events: none;，否则点击可能选中文本或触发误操作 - 动画要统一写在常态下：
transition: transform 0.3s, opacity 0.3s; - 收拢为叉号时：
::before顺时针转45°，::after逆时针转45°，span设opacity: 0
移动端布局必须用flex-direction: column，别碰float或inline-block
横向导航在桌面端用flex没问题，但折叠后垂直展开时，float会导致塌陷、inline-block有不可控间隙，小屏下极易错位或换行异常。
推荐写法：
-
nav ul设display: flex; flex-direction: column; - 菜单项
li或a用width: 100%撑满，别依赖text-align - 用
gap: 1rem控制项间距，比margin-bottom更干净；IE11不支持则退回到margin-bottom并清除最后一项 - 媒体查询断点设
@media (max-width: 768px)，.hamburger和nav在此宽度下才显示
最常被绕开的坑是：以为“结构对了就完事”，其实nav容器没设position: absolute或z-index，展开时会被其他层遮住；或者忘了给body加padding-top，导致页面内容被固定定位的nav盖住——这些都得手动补全，CSS不会自动推导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
