纯CSS可关闭侧边抽屉用checkbox+label+:checked实现，需确保ID与for匹配、避免display:none影响过渡、用transform/visibility控制显隐，注意移动端触控优化及IE11兼容性。
怎么用纯 HTML + CSS 实现可关闭的侧边抽屉（off-canvas）
不需要 JavaScript 也能触发开关，靠 <input type="checkbox"> + label + :checked 伪类联动就能搞定。核心是把 checkbox 隐藏，用 label 控制它，再用 :checked ~ 或 :checked + 选中后续菜单元素做显隐或位移。
常见错误是没加 for 属性或 ID 不匹配，导致点击无反应；或者菜单用了 display: none，导致 transition 失效——必须用 visibility + opacity 或 transform 配合 transition 才能有动画。
-
<input id="drawer-toggle" type="checkbox">必须带id，且不可被display: none完全隐藏（可用position: absolute; opacity: 0; pointer-events: none;） -
<label for="drawer-toggle">的for值必须和 input 的id完全一致，大小写敏感 - 菜单容器建议用
transform: translateX(-100%)初始状态，:checked ~ .drawer改为transform: translateX(0)，避免重排
为什么 click 后菜单闪一下就消失？
典型现象：点按钮菜单弹出，松手立刻收回去。本质是表单默认行为或事件冒泡干扰了 checkbox 状态维持。最常踩的坑是 label 套了 button 或 a 标签，或者菜单区域本身绑了阻止冒泡但没处理好 checkbox 的 toggle 逻辑。
根本解法是别让 label 被其他可交互元素包裹，也别给菜单加 pointer-events: none 后又忘了在打开时恢复。如果非要用 JS 控制，务必用 event.preventDefault() 拦住 label 默认行为，但更推荐纯 CSS 方案避开这问题。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查
<label>内是否嵌套了<button>或<a href="#">—— 这会抢走 click 事件 - 确保菜单区域没有设置
pointer-events: none，否则用户无法点击遮罩层关闭菜单 - 若用 JS 监听
change事件，不要在 handler 里手动click()或setAttribute("checked", ...)，破坏原生状态同步
移动端 touch 点击不灵敏？
iOS Safari 和部分安卓浏览器对 label 的 touch 响应有延迟或失效，尤其当菜单内容区域有 overflow: auto 或固定定位时。这不是 bug，是浏览器对“可点击区域”的判定变严格了。
解决方式很直接：给 <label> 加 cursor: pointer 和 -webkit-tap-highlight-color: transparent，同时确保其尺寸足够（至少 44×44px），必要时用 min-height 补足。另外，避免把 label 放在 transform 或 scale 变形的父容器里，会影响命中检测。
- 给触发 label 加
touch-action: manipulation，提升触控响应优先级 - 不用
onclick绑定 JS 来模拟 toggle，会绕过原生 checkbox 的 focus/active 状态 - 如果菜单里有输入框，打开后要手动
focus()，否则软键盘可能不弹出
IE11 兼容性要注意什么？
:checked ~ 在 IE11 是支持的，但 transform 动画需要加 -ms- 前缀，而且 flex 布局在抽屉内部容易塌陷。最大的坑是 IE11 不支持 position: fixed 在 transform 容器内的正确渲染——菜单会随页面滚动偏移。
稳妥做法是放弃 transform 移入，改用 left: -100% + left: 0，配合 transition: left .3s ease。虽然略重，但兼容性稳。另外，IE11 的 checkbox 无法通过 JS 触发 click() 来模拟点击，所以纯 CSS 方案在这里反而更可靠。
- 所有
transform属性必须补-ms-transform - 避免对抽屉容器设
transform: translateZ(0)强制硬件加速，IE11 会引发渲染错乱 - 遮罩层（overlay）用
position: fixed时，确保其父级没transform或perspective
真正麻烦的不是结构，而是菜单打开后焦点管理、屏幕阅读器声明、Esc 键关闭、以及多层嵌套时的 z-index 层叠顺序——这些没显式写在 HTML 里，但用户实际用起来卡在哪，往往就卡在这几处。
