纯CSS汉堡菜单易翻车因:checked依赖可聚焦控件，禁用display:none/visibility:hidden致交互失效；须用position:absolute移出视口、分离@media与:checked逻辑、以transform+opacity替代height动画防卡顿。
为什么纯CSS汉堡菜单在现代项目里反而容易翻车
纯CSS实现的汉堡菜单看似轻量，但实际交付时经常出现点击无响应、移动端无法关闭、焦点管理混乱等问题。根本原因不是CSS写错了，而是忽略了:checked状态依赖的必须可聚焦且能被用户触发——而很多开发者直接把input设为display: none或visibility: hidden，导致它既不可见也不可交互，甚至被屏幕阅读器忽略。
真正可用的方案必须满足三个条件：输入控件可访问、状态切换可靠、菜单动画不卡顿。下面的操作路径是经过真机（iOS Safari / Chrome Android）验证的。
用input[type="checkbox"] + label联动控制显隐
核心逻辑是利用label的for属性绑定input，点击label即触发input的:checked状态变化，再通过相邻兄弟选择器（~）或子元素选择器控制菜单样式。关键点在于不能隐藏input本身，而是把它“移出视口但保留可聚焦性”：
-
input用position: absolute; left: -9999px;而非display: none -
label必须有for属性，且值与input的id严格一致 - 菜单容器（如
.nav-menu）要放在input之后，才能用input:checked ~ .nav-menu选中
示例结构：
立即学习“前端免费学习笔记（深入）”；
<input type="checkbox" id="menu-toggle"> <label for="menu-toggle"></label> <nav class="nav-menu"></nav>
响应式断点与@media配合的陷阱
很多人把@media和:checked混在一起写，比如@media (max-width: 768px) { input:checked ~ .nav-menu { ... } }，这会导致桌面端即使缩放窗口也不会触发菜单显示——因为@media只在初始加载时计算一次，不监听:checked变化。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
正确做法是分离关注点：
- 用
@media控制“是否启用汉堡菜单布局”（即隐藏默认导航栏、显示label按钮） - 用
:checked控制“菜单是否展开”，且这个规则必须在所有断点内都生效
也就是说：input:checked ~ .nav-menu的样式声明不能包裹在@media里，否则小屏下点了没反应。
动画卡顿和transform替代height的必要性
直接对height做transition会强制浏览器重排（reflow），尤其在低端安卓机上明显掉帧。更稳妥的方式是用transform: scaleY() + opacity组合动画：
- 初始状态：
transform: scaleY(0); opacity: 0; -
:checked状态：transform: scaleY(1); opacity: 1; - 过渡属性只写
transform 0.3s ease, opacity 0.3s ease
注意transform需要触发硬件加速，所以建议加will-change: transform;到菜单容器上，但不要滥用——仅在动画元素上设置。
复杂点在于菜单内容高度不固定时，scaleY可能拉伸文字或导致子元素错位。这时候得靠max-height配合overflow: hidden兜底，但数值必须足够大（比如max-height: 500px），否则动画会截断。
