抽屉菜单需用<aside>或<nav>容器配合position:fixed、transform位移与transition动画实现，按钮通过aria-controls关联，JS需处理焦点、Esc关闭、点击外部关闭及可访问性属性，移动端须注意Safari的fixed+transform渲染bug和高度设置。
点击按钮触发 drawer 的 DOM 结构怎么组织
抽屉菜单不是浏览器原生控件，得靠自己搭结构 + CSS 动画 + JS 控制显隐。核心是把菜单内容放在一个 <aside> 或 <nav> 容器里，用 position: fixed 贴左/右边缘，初始设 transform: translateX(-100%)（向左收起）或 translateX(100%)（向右收起），再通过 JS 切换 class 控制位移。
按钮本身只需一个普通 <button>，加 aria-controls 指向抽屉的 id，方便可访问性：
<button aria-controls="main-drawer">☰</button> <aside id="main-drawer"><nav>...</nav></aside>
用 CSS 实现滑入滑出动画的关键属性
别只靠 display: none/block，那样没法过渡。必须用 transform + transition 组合：
-
transform: translateX(-100%)收起时完全移出视口（左抽屉），translateX(0)展开 -
transition: transform 0.3s ease-in-out必须写在抽屉容器上，且不能加!important（会干扰 JS 切换） - 记得加
will-change: transform提升渲染性能，尤其在移动端 - 遮罩层（
<div class="overlay">）要用background: rgba(0,0,0,0.5)+backdrop-filter: blur(2px)（可选），并设z-index在抽屉之下、内容之上
JS 控制开关时容易漏掉的细节
单纯 toggle class 不够，还得处理焦点、键盘关闭、点击外部关闭等真实交互：
立即学习“前端免费学习笔记（深入）”；
- 打开后立即
drawerElement.focus()，并设置tabindex="-1"让它可聚焦 - 监听
Escape键：用document.addEventListener('keydown', e => { if (e.key === 'Escape') closeDrawer() }) - 点击遮罩层或抽屉外区域关闭：监听
overlay的click，或给document加事件，用e.target === drawer || e.target.closest('#main-drawer')判断是否点在内部 - 关闭时清空
aria-hidden="true"和inert属性，否则屏幕阅读器仍会读取内容
移动端适配和 Safari 的兼容性坑
iOS Safari 对 transform + fixed 组合有渲染 bug：抽屉滚动时可能闪动或卡顿。解决方法很实际：
- 抽屉内部容器（如
<nav>）加overflow-y: auto，且必须设固定高度（比如max-height: 80vh），不能靠height: 100% - 避免在抽屉里用
position: sticky，Safari 会失效 - 如果用
touch-action: pan-y阻止水平拖拽干扰，要加在抽屉根元素上，而不是 body - 测试真机：模拟器里正常 ≠ 真机正常，特别是 iOS 16+ 的 viewport 缩放行为变化会影响
fixed定位
抽屉的宽度、阴影、滚动惯性这些视觉细节可以调，但结构和事件链一旦漏掉任一环，用户就会遇到关不掉、打不开、键盘失焦或者读屏器报错的问题。
