侧边滑动菜单的响应式实现需html语义结构、css定位与transform动画、javascript状态控制三者协同；固定定位、translatex()位移、媒体查询断点及body溢出隐藏缺一不可。
侧边滑动菜单的响应式布局，核心不是靠某个 magic 属性一招搞定，而是 HTML 结构 + CSS 定位 + JavaScript 控制状态 三者配合的结果。固定定位、transform: translateX() 和媒体查询缺一不可，漏掉任意一个环节，小屏下就容易卡死、无法滑出或遮挡内容。
用 nav + aside 明确语义，但别指望它们自动滑动
很多人以为写个 <aside></aside> 就是侧边栏，写个 <nav></nav> 就能滑动——其实这两个标签只负责语义，不带任何行为。真正决定“是否可见”“滑到哪”的是 CSS 的 position 和 transform。
-
<aside class="sidebar"></aside>更适合放辅助性内容（如广告、相关链接），而<nav class="mobile-menu"></nav>更适合放主导航，语义更准 - 不要把菜单直接塞进
顶层，建议包裹在<div class="layout"> 内，避免 <code>fixed定位时脱离文档流导致父容器高度塌陷 - 移动端菜单需设
top: 0; left: 0; width: 80vw; max-width: 320px;，而不是100%，防止在大屏手机上过宽 - 初始状态设
transform: translateX(-100%);，完全移出视口左侧 - 激活时用
transform: translateX(0);，注意要加transition: transform 0.3s ease; - 别忘了加
will-change: transform;（可选），提示浏览器提前优化渲染 - 如果用
left替代transform，记得同时加position: relative/fixed;，否则无效 - 桌面端（>768px）应默认显示菜单，且不依赖 JS 控制显隐；JS 逻辑只作用于小屏
- 在 CSS 中用
@media (max-width: 768px) { .sidebar { display: none; } .sidebar.is-open { display: block; } }，确保 JS 类生效有样式支撑 - 监听
window.matchMedia可以在窗口缩放时动态切换行为，比如从桌面模式切到平板模式时自动收起菜单 - 避免在 JS 中硬编码
768，提取成常量或读取getComputedStyle的断点值，方便后期维护 - 打开菜单时执行
document.body.style.overflow = 'hidden'; - 关闭时恢复
document.body.style.overflow = '';（不要设'auto'，可能覆盖用户自定义样式） - 更稳妥的做法是加一个类名如
menu-open到根元素，CSS 中统一控制：html.menu-open { overflow: hidden; } - 注意：iOS 上还需加
touch-action: none;到菜单容器，防止手势冲突导致滑动卡顿
transform: translateX() 比 left 更适合滑动动画
用 left: -100%; 切换显示/隐藏看起来简单，但会触发重排（reflow），动画卡顿；transform 只影响合成层，GPU 加速，滑动顺滑得多。
媒体查询断点要和 JavaScript 状态同步
常见错误是 CSS 在 @media (max-width: 768px) 下把菜单设为 display: none，但 JS 还在尝试 toggle is-open 类——结果点击没反应，控制台也无报错。
overflow: hidden 必须加在 body 上，否则页面横向滚动
菜单滑出时若没锁住 body，iOS Safari 会出现横向滚动条，用户一划就看到白边，体验断裂。这不是 bug，是浏览器对 fixed 元素 + 页面宽度变化的默认响应。
最易被忽略的是菜单内部链接的焦点管理——键盘用户按 Tab 键时，焦点不能“漏”到菜单外，也不能在菜单关闭后还停留在已隐藏的链接上。这需要手动 trap focus，不是加个 tabindex 就能解决的。
