纯 html 无法实现响应式侧边导航栏，需 css 配合语义化结构（nav/ul/li）与媒体查询、fixed 定位、transform 或 checkbox + :checked 实现折叠展开，并注意可访问性、触控适配及 body 滚动锁定。
纯 HTML 本身不能实现响应式侧边导航栏——它只提供结构，真正的响应行为靠 CSS 控制。关键在于用语义化标签搭骨架，再用 @media、position: fixed、transform 或 max-height + :checked 触发折叠/展开逻辑。
必须用 nav + ul + li 结构
这不是为了“好看”，而是为了让屏幕阅读器正确识别导航区域和项数：nav 告诉辅助工具“这是主导航”，ul 表示并列集合，li 必须直接包裹 a，否则 :hover 或 :checked ~ 选择器会失效。下拉菜单若存在，子 ul 必须是对应 li 的直接子元素，否则移动端定位偏移、焦点跳转错乱。
侧边栏定位靠 position: fixed + left/right
桌面端常见做法是把 nav 设为 position: fixed; top: 0; left: 0; width: 260px; height: 100vh;，再用 overflow-y: auto 处理内容超长滚动。但注意：固定定位的元素脱离文档流，如果页面有 body { padding-left: 260px; } 这类补偿，必须同步适配移动端断点，否则小屏下内容被遮挡。
- 不要用
float实现侧边栏——它无法撑满视口高度，且与 flex/grid 混用时容易冲突 -
width建议用rem或vw，避免固定像素在小屏上溢出 - 若需“滑入式”效果（如从左推入），优先用
transform: translateX(-100%)配合过渡，比left: -260px性能更好
移动端收起/展开必须用 input[type="checkbox"]
想零 JS 实现点击汉堡图标展开侧边栏？唯一可靠方案是原生表单控件：input[type="checkbox"] + label + :checked ~ 选择器。把 input 放在 nav 外部、label 之前，用 for 关联；nav 默认设 max-height: 0; overflow: hidden;，触发时设 max-height: 300px;（不能用 display: none，否则过渡动画失效）。
- 别写死
300px——如果菜单项动态增减，得预估最大高度，或改用 JS 动态计算 -
label点击区域必须 ≥ 44×44px（iOS 最小触控要求），建议加padding而非仅靠字体大小撑开 - IE11 不支持
:checked ~后代选择器，需降级为 JS 方案或放弃 IE 支持
最易被忽略的一点：侧边栏在小屏展开后，必须锁住 body 的滚动（body { overflow: hidden; }），否则背景内容仍可滚动，视觉割裂感极强。这个状态切换不能只靠 CSS，得配合 input 的 change 事件或伪类联动控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
