用 flex 布局实现侧边菜单：父容器 display: flex，菜单 flex: 0 0 200px，主内容 flex: 1 并 overflow: auto；高亮靠 JS 匹配 URL 动态加 active 类；移动端用 translateX(-100%) 抽屉式切换；侧边栏推荐 position: sticky 而非 fixed 以保障语义与兼容性。
怎么用 CSS 实现固定宽度侧边菜单 + 主内容区自适应
直接用 display: flex 布局最稳，不用浮动或绝对定位，兼容现代浏览器且响应式友好。关键不是“怎么写菜单”，而是“怎么让主区域自动避开侧边栏”。
常见错误是给主内容加 margin-left 硬推，结果窗口缩小时内容被切掉，或者侧边栏高度撑不满。
- 侧边菜单容器设固定宽（如
200px），不设position: absolute - 父容器用
display: flex，子元素分别设flex: 0 0 200px（菜单）和flex: 1（主区） - 主内容区内部再用
overflow: auto处理滚动，避免整页滚动条打架
<div class="layout"> <aside class="sidebar">菜单项</aside> <main class="main-content">页面内容</main> </div>
.layout { display: flex; height: 100vh; }
.sidebar { flex: 0 0 200px; background: #333; }
.main-content { flex: 1; overflow: auto; padding: 16px; }
菜单项点击后如何高亮当前项并保持状态
纯 HTML/CSS 只能靠 :target 或 :focus-within 做简单交互，但真实后台需要 JS 控制激活态——否则刷新就丢状态，也做不到权限过滤。
别用 onclick="this.className='active'" 这种内联写法，容易和框架冲突，也难维护。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给每个
<a>加唯一data-path，比如data-path="/user/list" - JS 启动时读取当前 URL 路径，匹配对应菜单项，添加
activeclass - 点击时用
event.preventDefault()防止跳转，再手动更新 URL（history.pushState）和 class - 如果用 Vue/React，直接绑定
v-model或useState更干净
移动端怎么收起侧边菜单又不影响桌面端体验
不是简单加个 @media 把菜单 display: none 就完事——用户点开后要能呼出，且不能遮挡主内容。
核心是「抽屉式」切换：默认隐藏，点击汉堡图标展开，背景半透明遮罩防误触。
- 侧边栏加
transform: translateX(-100%)和过渡动画 - 触发按钮用
input[type="checkbox"] + label或 JS 控制一个is-openclass - 桌面端媒体查询中直接取消 translate，并设
position: static - 注意：iOS Safari 对
transform+fixed组合有渲染 bug，建议菜单用position: sticky替代
为什么用 position: sticky 比 fixed 更适合侧边菜单滚动
position: fixed 会让菜单脱离文档流，主内容区无法自然撑高，打印、SEO、无障碍阅读都会出问题；而 sticky 在滚动时才“吸顶”，既保持结构语义，又实现视觉固定。
但它有个硬限制：必须有可滚动的父容器，且父容器不能是 overflow: hidden。
- 给侧边栏父容器加
max-height: 100vh和overflow-y: auto - 侧边栏自身设
position: -webkit-sticky; position: sticky; top: 0; - IE 不支持
sticky，若需兼容，得 fallback 到 JS 监听scroll手动 toggle class - 别忘了给菜单项加
box-sizing: border-box，不然 padding 会撑宽导致换行
侧边菜单真正的复杂点不在布局，而在状态同步、权限控制和滚动边界处理——样式只是表层，逻辑断点往往藏在路由跳转和 DOM 更新的间隙里。
