简介这份资源提供了一套基于 HTML 与 CSS 实现的侧边伸缩导航栏完整示例面向具备基础前端知识、希望提升页面交互与响应式布局能力的开发者与学习者。它解决的是传统侧边栏在展开收起、子菜单显隐及移动端适配上的实现问题适合用于后台管理界面、个人站点或课程作业等场景。压缩包共 9 个文件约 61KB包含 2 个 HTML 页面、2 个 CSS 样式表、1 个 JavaScript 脚本、1 个字体文件及配套图标字体资源另有说明文本与效果预览图结构紧凑、便于直接运行与二次修改。目前已有 6078 人学习下载说明该案例在同类教程中具有较高参考价值。读者可从中获取可复用的导航栏结构、过渡动画写法、子菜单控制逻辑以及媒体查询下的响应式处理思路并借助图标字体与脚本文件快速搭建出美观且交互流畅的侧边导航效果。1. 侧边伸缩导航栏从一份 HTMLCSS 资源说起后台管理系统里最不起眼、却最容易被反复返工的一块就是侧边导航栏。产品经理要它「能收能展」设计师要它「动画顺滑」前端自己还得保证它不把主内容区挤爆、不在小屏上翻车。我手上这份htmlcss侧边伸缩导航栏资源就是冲着这个场景来的纯 HTML CSS 实现不依赖任何框架展开态和收起态靠一个 checkbox 或 class 切换主内容区用 flex 或 margin 联动。它适合两类人——一类是刚学完html➕css➕js基础语法、想找一个完整小项目练手的同学另一类是接私活、做后台模板需要一个能直接嵌进去的导航骨架的从业者。下面我按「它怎么动起来 → 参数怎么调 → 哪里会翻车」的顺序拆一遍。2. 伸缩逻辑怎么落地checkbox 与 class 两条路线2.1 为什么优先用 checkbox 而不是 JS这份资源的核心机制是把「展开/收起」这个状态交给一个隐藏的input typecheckbox来托管。原理很直白CSS 的:checked伪类可以选中被勾选的 checkbox再用兄弟选择器~或去控制导航栏和主内容区的样式。这样做的好处是零 JS 依赖页面加载即用不存在脚本没执行完导航栏卡在半展开状态的问题。常见做法是这种结构!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title侧边伸缩导航栏/title link relstylesheet hrefstyle.css /head body !-- 状态开关视觉上隐藏但保留可访问性 -- input typecheckbox idnav-toggle classnav-toggle !-- 汉堡按钮label 与 checkbox 绑定点击即切换状态 -- label fornav-toggle classhamburger span/spanspan/spanspan/span /label !-- 侧边导航 -- aside classsidebar ul classnav-list lia href#仪表盘/a/li lia href#订单管理/a/li lia href#商品详情/a/li lia href#系统设置/a/li /ul /aside !-- 主内容区 -- main classcontent h1主内容区/h1 p导航收起时这里会自动让出空间。/p /main /body /html这段结构里有两个关键点。第一input必须放在.sidebar和.content之前因为 CSS 的兄弟选择器只能向后匹配放后面就选不中了这是新手最容易踩的坑。第二label fornav-toggle的for值必须和 checkbox 的id完全一致写错一个字母按钮就点不动而且不会有任何报错纯靠肉眼排查。2.2 用 CSS 变量控制宽度与过渡宽度和动画时长不要写死在多个地方用 CSS 自定义属性统一管理改一个值全站生效:root { --sidebar-width: 240px; /* 展开态宽度 */ --sidebar-collapsed: 64px; /* 收起态宽度 */ --transition-time: 0.3s; /* 过渡时长 */ --sidebar-bg: #1f2937; --sidebar-fg: #e5e7eb; } * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; /* 侧边栏与主内容并排 */ min-height: 100vh; font-family: system-ui, sans-serif; } /* 隐藏原生 checkbox但不用 display:none保留键盘可聚焦 */ .nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; } .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-fg); transition: width var(--transition-time) ease; overflow: hidden; /* 收起时裁掉文字避免溢出 */ flex-shrink: 0; } .content { flex: 1; padding: 24px; transition: margin-left var(--transition-time) ease; } /* 核心勾选后侧边栏收窄 */ .nav-toggle:checked ~ .sidebar { width: var(--sidebar-collapsed); } /* 收起时隐藏文字只留图标位 */ .nav-toggle:checked ~ .sidebar .nav-list a { opacity: 0; pointer-events: none; }参数说明--sidebar-width一般取 200280px太窄放不下中文菜单项--sidebar-collapsed取 5672px正好容纳一个图标加内边距--transition-time建议 0.20.35s低于 0.2s 显得生硬高于 0.4s 会有拖沓感。overflow: hidden是必须的否则收起时文字会挤成一团或者撑破容器。flex-shrink: 0防止主内容区内容过多时把侧边栏压扁。2.3 汉堡按钮与图标位对齐汉堡按钮用三个span堆叠配合position: fixed固定在左上角.hamburger { position: fixed; top: 16px; left: 16px; width: 32px; height: 32px; cursor: pointer; z-index: 10; display: flex; flex-direction: column; justify-content: space-around; padding: 6px; } .hamburger span { display: block; height: 2px; background: #111; border-radius: 2px; transition: transform var(--transition-time) ease; }这里有个细节按钮固定在左上角会和侧边栏顶部的 logo 区域重叠。常见做法是给侧边栏顶部预留padding-top: 64px或者把按钮放进侧边栏内部随宽度一起移动。我一般选后者视觉上更整体。图标位对齐则靠给.nav-list a设固定的padding-left收起态下文字透明但占位还在图标不会跳。3. 主内容区联动margin 还是 flex3.1 两种联动方式的取舍侧边栏变窄了主内容区得跟着让位否则中间会空出一块。有两种做法一是给.content设margin-left随状态切换改数值二是用 flex 布局让.content自动填充剩余空间。这份资源用的是 flex因为flex: 1天然跟随兄弟元素宽度变化不需要额外写联动规则。但如果你的主内容区里有position: fixed的顶栏flex 就管不到它了这时得用 margin 方案.content { flex: 1; transition: margin-left var(--transition-time) ease; } /* 若侧边栏是 fixed 定位主内容用 margin 让位 */ .nav-toggle:checked ~ .content { margin-left: var(--sidebar-collapsed); }判断标准很简单侧边栏在文档流里用 flex侧边栏position: fixed脱离文档流用 margin。两者混用会出现「侧边栏动了、内容没动」或者「内容动了两次」的玄学现象。3.2 小屏适配断点与抽屉模式桌面端是「收窄」移动端应该是「完全隐藏 覆盖式抽屉」。用媒体查询切换media (max-width: 768px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); /* 默认移出屏幕 */ transition: transform var(--transition-time) ease; width: var(--sidebar-width); /* 移动端展开仍是全宽 */ } .nav-toggle:checked ~ .sidebar { transform: translateX(0); /* 勾选后滑入 */ width: var(--sidebar-width); } .content { margin-left: 0; /* 移动端内容不缩进 */ } }参数说明断点 768px 是常见分界也可以按你的设计稿取 640px 或 992px。移动端侧边栏用transform而不是width因为transform走 GPU 合成动画更顺不会触发重排。translateX(-100%)保证完全移出配合overflow-x: hidden防止出现横向滚动条。3.3 用prefers-reduced-motion兜底有些用户系统里开了「减少动态效果」这时候过渡动画会让人不适。加一段媒体查询尊重这个设置media (prefers-reduced-motion: reduce) { .sidebar, .content, .hamburger span { transition: none; } }这不是可选项是基本素养。很多模板资源为了「动画好看」把过渡拉得很长反而在无障碍上扣分。4. 避坑与排查五个真实翻车记录4.1 点击按钮没反应现象汉堡按钮点了没动静导航栏纹丝不动。原因label forxxx的for值和 checkbox 的id不一致或者 checkbox 被display: none后在某些浏览器里无法通过 label 触发。解决把display: none换成opacity: 0; position: absolute;并逐字核对for与id。4.2 收起时文字溢出或换行现象侧边栏收窄后菜单文字挤成两行或者戳出容器。原因只改了宽度没处理文字。解决给.sidebar加overflow: hidden给文字加white-space: nowrap收起态下用opacity: 0隐藏而非display: none保留占位避免图标跳动。4.3 主内容区出现横向滚动条现象页面底部莫名多出一条横向滚动条。原因侧边栏收起时宽度变化触发了重排或者移动端translateX(-100%)的元素仍占据布局空间。解决给body或外层容器加overflow-x: hidden移动端侧边栏用position: fixed脱离文档流。4.4 过渡动画卡顿掉帧现象展开收起时动画一顿一顿的。原因对width做过渡会触发重排和重绘元素多了就卡。解决桌面端宽度变化无法完全避免重排但可以给侧边栏加will-change: width提示浏览器提前优化移动端一律用transform替代width。4.5 刷新后状态丢失现象用户收起导航栏刷新页面后又变回展开。原因checkbox 状态不持久化。解决纯 CSS 方案本身不存状态如果需要记住得加一小段 JS 读写localStorage在页面加载时给 checkbox 设checked。这是纯 CSS 方案的边界别硬扛。5. 进阶技巧把导航栏做成可复用组件5.1 用:has()做父级联动现代浏览器已经支持:has()可以让父容器根据子元素状态反向控制样式省掉一层兄弟选择器的结构约束/* 当 body 内存在被勾选的 nav-toggle 时调整整体布局 */ body:has(.nav-toggle:checked) .content { padding-left: 80px; }这条规则的好处是不再要求 checkbox 必须是 sidebar 的前置兄弟结构可以更灵活。代价是兼容性——老版本浏览器不认得配合supports做降级。5.2 图标与文字分离的收起态收起后只留图标是常见需求。做法是给每个菜单项配一个图标元素收起时隐藏文字节点li a href# i classicon-dashboard/i span classlabel仪表盘/span /a /li.nav-toggle:checked ~ .sidebar .label { display: none; } .nav-toggle:checked ~ .sidebar .nav-list a { justify-content: center; /* 图标居中 */ padding-left: 0; }这里用display: none是安全的因为图标本身占位不会导致布局塌陷。但要注意给a设title属性收起态下鼠标悬停能看到文字提示否则用户不知道图标是什么意思。5.3 验证清单改完别急着交付按这张表过一遍检查项预期结果排查手段点击汉堡按钮侧边栏平滑收展检查 label 的 for 与 id键盘 Tab 聚焦按钮可聚焦、可回车触发确认 checkbox 未被 display:none窗口缩到 375px侧边栏变抽屉、无横向滚动查 overflow-x 与 fixed 定位系统开启减少动效无过渡动画查 prefers-reduced-motion 媒体查询刷新页面状态符合预期需要持久化则补 localStorage我自己的习惯是每次改完侧边栏先把浏览器窗口从 1440px 拖到 320px 再拖回去来回三遍看有没有哪一帧跳变或者内容错位。这个动作帮我逮住过好几次「桌面端正常、移动端抽屉滑出时主内容跟着抖」的问题根因是移动端忘了把.content的margin-left归零。从那以后我每次动布局都强制走一遍「宽屏 → 窄屏 → 宽屏」的拖拽验证再配合键盘 Tab 走一圈焦点顺序。希望这份拆解帮到你拿到资源后先跑通默认态再按自己的设计稿改 CSS 变量别一上来就大改结构。本文还有配套的精品资源点击获取
