纯css左侧滑出菜单可用checkbox+label+:checked实现：隐藏checkbox，用label触发切换，通过~选择器控制菜单transform位移，配合fixed定位、明确宽高、过渡动画及遮罩层（fixed全屏、z-index高于菜单、可点击）完成交互。
如何用纯CSS实现左侧滑出菜单（无JS依赖）
移动端抽屉菜单完全可以用 checkbox + label + :checked 伪类 + transform 实现，不引入JS就能控制显隐，兼容性好且无运行时风险。
关键在于把 input[type="checkbox"] 隐藏，用 label 触发切换，再通过相邻兄弟选择器（~）或子选择器控制菜单容器的 transform: translateX(-100%) / translateX(0)。
- 菜单容器需设
position: fixed或absolute，并固定左边界（left: 0），宽度明确（如width: 280px） -
input必须在 DOM 中位于菜单容器之前，否则~无法选中 - 过渡动画加在菜单容器上，而不是
:checked状态本身：transition: transform 0.3s ease - 遮罩层（
overlay）建议用独立div，同样靠:checked ~ .overlay控制opacity和visibility
点击遮罩关闭菜单时，为什么菜单有时不响应？
常见原因是遮罩层（.overlay）层级（z-index）低于菜单内容，或遮罩未覆盖整个视口，导致点击事件穿透到下层元素。
- 遮罩必须设
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh -
z-index要高于菜单容器（如菜单为z-index: 1000，遮罩至少1001），但低于系统级弹窗（如键盘、原生选择器） - 遮罩需有
background-color: rgba(0,0,0,0.5)或类似值，否则视觉不可见，但更关键的是：它必须可点击——不能设pointer-events: none - 若仍不触发关闭，检查是否误将
label的for属性指向了错误的id，或input缺失id
移动端真机上菜单卡顿、滑动不跟手？
本质是渲染性能问题，transform 本应走 GPU 加速，但某些属性会触发重排（reflow）或阻止合成层提升。
- 确保菜单容器有
will-change: transform（仅在需要时添加，避免滥用） - 禁止给菜单容器设
box-shadow、border-radius或半透明背景（rgba()）——这些在部分安卓 WebView 中会强制 CPU 渲染 - 菜单内文字避免使用
font-smooth: auto或-webkit-font-smoothing，iOS 上可能引发闪烁 - 如果菜单含图片或长列表，考虑用
contain: layout style paint隔离渲染影响范围
Vue/React 项目里要不要改造成组件？
可以，但别为了封装而封装。原生 CSS 方案已足够轻量，JS 组件反而增加 bundle 体积和状态管理复杂度。
- 若项目已用 Vue，直接封装为
<drawermenu></drawermenu>组件没问题，但内部仍推荐用v-model控制open，底层复用同一套 CSS 动画逻辑 - React 中避免用
useState+useEffect去模拟:checked行为——没必要，直接用受控input或更简单的useState+className切换即可 - 真正要注意的是 SSR 场景：服务端渲染时
:checked状态不可知，首次加载菜单默认应为关闭态，避免样式闪动 - 无障碍支持常被忽略：
input必须有aria-label（如"打开侧边导航"），菜单容器加role="navigation"和aria-hidden="true/false"
最麻烦的其实是 iOS Safari 的 viewport 缩放 bug：当菜单展开时，页面偶尔会意外放大。解决方法是在 meta[name="viewport"] 中加上 user-scalable=no，或监听 touchstart 临时禁用缩放——这点几乎没人提，但线上真会遇到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
