创建HTML侧边栏需语义结构（优先nav）、CSS布局（flex/grid）与可访问性（aria-current、href锚点、焦点管理）三者齐备；仅用div或aside不设边界会导致布局错位、响应式失效等问题。
侧边栏不是加个 div 再塞点 ul 就完事的——布局错位、响应式失效、点击穿透、滚动卡顿，这些问题全在 HTML 结构和 CSS 作用域没对齐时爆发。
HTML 结构必须语义化且可嵌套控制
很多侧边栏一动就塌，根源是把导航逻辑硬塞进 aside 或 nav 里却不设边界。浏览器默认会把 nav 当成流式容器，内部 ul 的 margin 和 padding 容易外溢，导致整体偏移。
- 用
nav包裹主菜单，但立刻加role="navigation"防止部分屏幕阅读器误判 - 每个菜单项用
li，内部链接必须带href（哪怕只是#），否则键盘 Tab 焦点会跳过 - 如果有子菜单，用嵌套
ul，但必须给父li加aria-haspopup="true"和aria-expanded="false" - 避免把图标写死在 HTML 里，统一用伪元素
::before或background-image控制，方便主题切换
CSS 宽度与定位必须锁定根容器
侧边栏宽度飘忽、在 flex 布局里被压缩、在移动端突然撑满全屏——全是没切断父级影响造成的。CSS 的 width 和 position 必须有明确锚点。
- 给侧边栏最外层加
flex-shrink: 0，防止在display: flex的父容器中被压缩 - 用
min-width而非width控制基础尺寸，比如min-width: 240px，兼容小屏折叠逻辑 - 固定定位（
position: fixed）时，务必同时设top: 0和left: 0，否则在 Safari 中可能偏移 - 如果侧边栏要随页面滚动，改用
position: sticky，但必须确保其父容器有明确高度或overflow: visible，否则粘性失效
响应式切换别只靠 @media，要配合 HTML 属性控制
单纯用媒体查询隐藏/显示侧边栏，会导致 DOM 仍存在、焦点可抵达、屏幕阅读器仍播报——这不是“隐藏”，是“假装看不见”。真隐藏得让浏览器和辅助技术都感知不到。
立即学习“前端免费学习笔记（深入）”；
- 用
data-collapsed="true"这类自定义属性标记状态，CSS 用[data-collapsed="true"]选择器控制显隐 - JavaScript 切换时，同步修改
aria-hidden和inert属性：el.setAttribute('inert', '')比display: none更彻底 - 移动端收起后，记得给
body加overflow: hidden，防止背景内容还能滚动 - 动画用
transform: translateX()替代left，避免触发重排，尤其在低端安卓机上更稳
侧边栏最难的不是样式炫酷，而是每次交互后 DOM 结构、焦点顺序、ARIA 状态、CSS 渲染层这四者是否始终对齐——漏掉任意一个，用户就会卡在某个看不见的按钮上。
