企业官网建设流程全解析

简介：这是一份基于HTML与CSS的侧边伸缩导航栏示例代码，面向前端初学者或需要快速实现侧边栏交互的开发者，演示如何利用复选框选中状态与CSS过渡来展开收起导航，并包含基础悬停、聚焦效果及简单的响应式处理思路。压缩包共9个文件，约61KB，主要包含2个HTML页面、2个CSS样式文件、1个JavaScript脚本、1个字体图标文件（含TTF与JSON配置），以及效果图和说明文档，可直接在浏览器中打开体验。目前已有6078人浏览学习，适合作为前端布局与交互的入门参考。代码结构清晰，可通过实际文件了解导航栏的HTML骨架、伸缩动画的实现逻辑以及字体图标的使用方式，便于在此基础上扩展为多级菜单或进一步适配移动端。

1. 侧边伸缩导航栏：为什么我劝你别急着上框架

侧边伸缩导航栏是 html+css 项目里出现频率最高的交互组件之一：桌面端展开时承载多级菜单，点击按钮收起成一条只留图标的窄栏，给内容区腾地方；移动端退化成抽屉式遮罩菜单，点开时覆盖半透明遮罩。很多刚接触前端的人遇到这个需求第一反应是装一套 UI 框架，但实际工作里用原生 html、css 加十几行 JavaScript 就能做得很干净，还能完全按项目设计调宽度、动画和断点。下面把结构、动画、参数和踩坑一次讲透，适合正在做管理后台、文档站或作品集，需要快速落地侧边栏且不想被框架样式绑架的开发者。

2. 先搭结构再谈伸缩：HTML 骨架与两种状态的设计

2.1 侧边栏 HTML 结构：导航主体、内容区与遮罩层怎么分

写任何交互组件之前先把 DOM 结构想清楚。一个可伸缩侧边栏的最小结构包含四块：aside（侧边栏主体）、nav（导航列表）、main（内容区）、mask（移动端遮罩层）。常见做法是把收起/展开状态交给 body 上的一个 class 控制，不在 HTML 里写死两套布局，后续改宽度和动画只动 CSS，不用动结构。

<aside class="sidebar" id="sidebar"> <div class="sidebar-header"> <span class="logo-text">Admin Pro</span> <button class="toggle-btn" id="toggleBtn" aria-label="切换菜单">☰</button> </div> <nav class="sidebar-nav"> <ul> <li><a href="#dashboard" class="nav-item"> <span class="nav-icon">◧</span> <span class="nav-text">仪表盘</span> </a></li> <li><a href="#users" class="nav-item"> <span class="nav-icon">◱</span> <span class="nav-text">用户管理</span> </a></li> <li><a href="#settings" class="nav-item"> <span class="nav-icon">◉</span> <span class="nav-text">系统设置</span> </a></li> </ul> </nav> </aside> <div class="sidebar-mask" id="sidebarMask"></div> <main class="main-content"> <!-- 页面内容 --> </main>

结构里 .nav-text 是收起后要隐藏的文字，.nav-icon 是收起后保留的图标；.sidebar-mask 只在移动端抽屉形态显示，桌面端不出现。注意不要把遮罩层嵌进 aside，否则收起时遮罩宽度会跟着侧边栏一起缩，用户点不到遮罩关闭区域，交互就废了。

把遮罩单独拎出来的第二个原因：遮罩要覆盖整个视口，用 position: fixed + inset: 0 实现，如果嵌在 aside 里，而 aside 又设置了 overflow: hidden（收起时必须加），遮罩会被裁掉，显示不完整。我早期做过一版把遮罩写进 aside，移动端排查了很久才发现是 overflow 把它裁掉了。

导航列表不要只做一层。实际后台菜单经常有二级甚至三级，ul/li 天然支持嵌套，把子菜单写成 li 里的 ul 就好。子菜单的收起态默认隐藏，展开态由父级 li 的 open 类控制；侧边栏整体收起成窄栏时，子菜单可以直接不显示，等鼠标 hover 图标时再以悬浮面板形式浮出来，这个交互后面会提到。

侧边栏底部通常会放用户头像和退出入口。这块区域在收起态下同样要处理：头像可以保留，用户名和退出文字隐藏。结构上我习惯在 aside 内、nav 之后加一个 .sidebar-footer 区块，样式和导航项保持同一套收起规则。

<div class="sidebar-footer"> <a href="#profile" class="nav-item"> <span class="nav-icon">◍</span> <span class="nav-text">个人中心</span> </a> </div>

这个结构直接复用 .nav-item 的样式，收起后的对齐和隐藏行为自动和上面的菜单一致，不用再写一套规则。图标我一般用 SVG sprite 或简单的内联 SVG，不用 emoji。emoji 在不同系统里渲染差异很大，宽度和基线都不稳定，收起成 64px 窄栏时对齐会很难看；字体图标库（Font Awesome 那类）方便但要引第三方依赖。如果项目里暂时不想引任何库，用一个 24px 的 span 加背景图或纯 CSS 形状也能过渡，关键是固定好宽高，别让内容撑开布局。样式统一放外部 css 文件，css 文件里不需要再写