不用JavaScript可实现响应式侧边栏，需用<input type="checkbox">控制显隐；结构必须为<nav>包裹<ul>，配合aria-haspopup、flex-shrink: 0、min-width、transform动画及合理z-index确保可用性与兼容性。
不用 JavaScript 就能做响应式侧边栏，但必须用 <input type="checkbox"> 控制显隐状态；纯 display: none + @media 在移动端会留焦点、影响可访问性。
侧边栏 HTML 结构必须用 <nav> 包裹 <ul>
很多“侧边栏塌了”是因为用了 <div> 或 <aside> 当导航容器——它们没语义、不带默认列表流，导致 CSS 定位错乱。浏览器对 <nav> 有隐式行为（比如某些 UA 样式重置），且配合 aria-current 和键盘 Tab 顺序更可靠。
-
<nav>内部只放一个<ul>，每个菜单项是<li>，链接必须是<a href="#">或真实路径，空链接写成href="javascript:void(0)"，否则按 Tab 会跳过 - 子菜单用嵌套
<ul>，但父<li>必须加aria-haspopup="true"和aria-expanded="false" - 别把图标写进 HTML，统一用
::before或background-image，否则换主题时要批量改 DOM
position: fixed 侧边栏必须配 top: 0; left: 0; flex-shrink: 0
只设 position: fixed 不够，Safari 下可能偏移；在 display: flex 的父容器里，侧边栏会被默认压缩（flex-shrink: 1），文字一多就折行或溢出。
- 最外层
<nav>加flex-shrink: 0，锁死不缩放 - 宽度用
min-width: 240px而非width: 240px，小屏折叠时还能收缩到 60px 图标态 - 固定定位必须同时写
top: 0和left: 0，否则滚动后定位基准漂移 - 如果要随页面滚动（非固定），改用
position: sticky; top: 0，但父容器不能有overflow: hidden
移动端收起逻辑不能只靠 @media 隐藏
单纯用 @media (max-width: 768px) { nav { display: none; } } 是伪隐藏：DOM 还在、Tab 键能聚焦、屏幕阅读器照读——这不是响应式，是障眼法。
立即学习“前端免费学习笔记（深入）”；
- 用
<input type="checkbox" id="sidebar-toggle">+<label for="sidebar-toggle">模拟开关，CSS 用input:checked ~ nav控制显隐 - JavaScript 切换时，同步设
el.setAttribute('inert', '')替代display: none，辅助技术真正忽略 - 侧边栏展开时，给
<body>加overflow: hidden，防止背景内容还能滑动 - 动画用
transform: translateX()，别用left，避免触发重排，低端安卓机更稳
最易被忽略的点是：侧边栏的 z-index 必须高于主内容，但又不能无限高——否则遮挡 position: fixed 的顶部通知栏；建议固定设为 z-index: 100，主内容用 z-index: 1，留出安全层级空间。
