左侧菜单需用 position: fixed 实现始终可见，顶部留出导航栏高度，内容区避让并设 overflow: auto；收起/展开用 classList.toggle() 切换预设类；响应式需结合 matchMedia 和 window.innerWidth 动态处理，移动端注意 transform 与 z-index 同步，嵌套菜单须语义化并支持无障碍访问。
用 position: fixed 实现左侧菜单始终可见
后台页面最核心的需求之一，就是左侧菜单不随滚动消失。用 position: relative 或 position: absolute 都做不到这点——前者依赖父容器，后者一滚动就跑偏。只有 position: fixed 能真正“钉死”在视口左侧。
关键点在于：顶部导航栏高度必须明确（比如 48px），然后让菜单从 top: 48px 开始固定，同时设 bottom: 0 拉满高度。内容区则用 left: 200px（或菜单宽度）避开它，否则会被遮挡。
- 菜单容器必须设置
width和min-width，避免小屏下塌缩（例如width: 20%; min-width: 200px） - 内容区要加
overflow: auto，不然内容溢出不可见 - 别忘了给
body清除默认margin，否则顶部会留白
用 classList.toggle() 控制收起/展开状态
纯 CSS 无法响应点击，必须靠 JS 切换类名来驱动动画。直接操作 style.width 是反模式——它绕过 CSS 过渡、难维护、且和媒体查询冲突。
推荐做法是预设两个类：sidebar-collapsed（宽度 60px，隐藏文字）和默认展开态。点击按钮时只调用 element.classList.toggle('sidebar-collapsed') 即可。
立即学习“前端免费学习笔记（深入）”；
- PC 端收起后，图标保留，所有
.nav-label、.menu-text类需用display: none隐藏 - 移动端逻辑不同：默认收起，靠
transform: translateX(-100%)移出屏幕，点击再切回translateX(0) - 窗口 resize 时要检查当前宽度，自动同步状态（比如从 PC 缩小到手机尺寸，得主动加
show类）
响应式断点要匹配真实设备行为
别硬套 @media (max-width: 768px)。实际测试发现，iPad 竖屏常为 768px，但很多安卓平板是 800px 或 812px，而 iPhone SE 是 375px。用固定值容易在中间尺寸出现“半展开”错位。
更稳妥的方式是监听 window.innerWidth，结合 matchMedia 做判断：
const mobileQuery = window.matchMedia('(max-width: 768px)');
mobileQuery.addEventListener('change', handleMediaChange);
- PC 端切换只影响宽度类；移动端切换必须同时控制
transform和z-index（否则被内容层盖住） - 移动端点击菜单项后，应自动收起侧边栏——用户不会想手动关第二次
- 用
prefers-reduced-motion查询关闭过渡动画，对动画敏感用户更友好
嵌套菜单的 DOM 结构必须语义化
多级菜单不是靠 JS 动态生成才叫“动态”，而是 HTML 结构本身就要支持层级。用嵌套 <ul><li> 是最稳妥的方案，比纯 div 更利于键盘导航、屏幕阅读器识别，也方便 CSS 用 ul ul 选择器精准控制子级样式。
常见错误是把所有菜单项平铺在一个 <ul> 里，再靠 JS 插入子菜单——这样一旦 JS 失效，整个二级菜单就消失了。
- 一级菜单项用
<h2>或带role="heading"的<div>，标明层级 - 子菜单容器加
role="menu"，菜单项加role="menuitem"，支持键盘↑↓←→导航 - 用
aria-expanded和aria-hidden同步展开/隐藏状态，不能只靠 CSSdisplay
