纯html无法实现可交互侧边栏抽屉菜单，必须结合transform: translatex()、transition和javascript切换类名；checkbox方案有结构限制且不支持无障碍，推荐class切换方案并注意ios兼容性与滚动处理。
纯 HTML 无法在线运行出可交互的侧边栏抽屉菜单——它没有状态、不响应点击、也不能触发动画。真正起作用的是 transform: translateX() + transition + JavaScript 切换类名，三者缺一不可。
为什么不能只靠 HTML + CSS 在线编辑器跑起来
很多新手在 CodePen、JSFiddle 或 VS Code Live Server 里写完 HTML 和 CSS，发现“点按钮没反应”，本质是漏了关键环节：
-
<input type="checkbox">方案看似无 JS，但依赖:checked ~ .drawer选择器，要求结构严格：开关和菜单必须是同级兄弟元素；一旦嵌套错层（比如菜单包在<header></header>里），CSS 就失效 - 在线编辑器默认不拦截
body滚动，抽屉打开后背景仍可滚动，体验断裂 - 移动端 iOS Safari 对
transform: translateX(-100%)渲染有兼容性问题，部分版本需加left: -100vw兜底，纯 CSS 无法动态降级 - 无障碍支持（
aria-expanded、焦点自动跳转、Escape关闭）必须用 JS 同步更新，CSS 做不到
在线运行时最稳的 class 切换方案
推荐在 CodePen/JSFiddle 等平台直接写带 JS 的最小可行代码，避免 checkbox hack 的结构陷阱：
HTML 结构保持简洁：<button id="menu-toggle" aria-expanded="false" aria-controls="sidebar">☰</button><nav id="sidebar" role="navigation" aria-hidden="true">...</nav><div id="overlay"></div>
CSS 关键段（注意 transform 和 transition 必须成对）：.sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; transform: translateX(-100%); transition: transform 0.3s ease-in-out; }.sidebar.is-open { transform: translateX(0); }#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; pointer-events: none; }#overlay.is-visible { opacity: 1; pointer-events: auto; }
JS 控制逻辑（粘贴即用）：const toggle = document.querySelector('#menu-toggle');const sidebar = document.querySelector('#sidebar');const overlay = document.querySelector('#overlay');toggle.addEventListener('click', () => { const isOpen = sidebar.classList.contains('is-open'); sidebar.classList.toggle('is-open'); overlay.classList.toggle('is-visible'); toggle.setAttribute('aria-expanded', !isOpen); sidebar.setAttribute('aria-hidden', isOpen); if (!isOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; }});
移动端和 iOS 软键盘必须处理的坑
在线预览时最容易忽略的不是动画，而是真实设备行为：
- iOS Safari 打开软键盘后，
position: fixed的抽屉会被顶出视口——这不是代码错，是 WebKit 的已知限制；临时解法是监听focus事件，对input元素获焦时把抽屉切为position: absolute并重算top - 遮罩层（
#overlay）必须和抽屉同级、都挂载在下；若写成抽屉的子元素，在 iOS 上点击无效或层级错乱 - 别用
document.body.style.overflow = 'hidden'粗暴禁滚动——会导致页面宽度突变、内容右移；更稳的是加 class：document.body.classList.add('no-scroll')，再配 CSS.no-scroll { overflow: hidden; } -
tabindex和焦点循环必须手动实现：抽屉打开后，sidebar.querySelector('a, button').focus()；按Escape关闭时，焦点要回到toggle按钮上
真正麻烦的不是写出来，而是让菜单在 CodePen 里预览时就通过 iOS 真机测试——很多动画在桌面 Chrome 看着顺滑，到 iPhone 上就卡顿或错位，根源常是漏了 will-change: transform 或没加 -webkit-transform 前缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
