侧边栏收缩展开的实现原理
纯css实现侧边栏收缩展开的核心思路是通过状态切换改变侧边栏的尺寸或位置，再配合过渡动画让变化过程更平滑。常见的状态切换方式有两种，一种是使用复选框的选中状态，另一种是使用:target伪类，其中复选框方案兼容性更好，也更常用。
方案一：基于宽度变化的实现
这种方案通过切换侧边栏的宽度实现收缩展开，收缩时宽度设为较小值，展开时设为正常宽度，配合transition属性实现动画过渡。
核心实现步骤
- 创建侧边栏容器和触发按钮，触发按钮用label关联隐藏的复选框
- 侧边栏设置初始宽度和过渡属性，复选框选中时修改侧边栏宽度
- 主内容区设置flex布局，侧边栏宽度变化时自动调整占位
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边栏宽度变化实现</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
}
/* 隐藏复选框 */
#sidebar-toggle {
display: none;
}
/* 侧边栏样式 */
.sidebar {
width: 240px;
background: #2c3e50;
color: #fff;
padding: 20px;
transition: width 0.3s ease;
overflow: hidden;
white-space: nowrap;
}
/* 复选框选中时侧边栏收缩 */
#sidebar-toggle:checked ~ .sidebar {
width: 60px;
}
/* 触发按钮样式 */
.toggle-btn {
display: block;
padding: 10px;
background: #34495e;
color: #fff;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
}
/* 主内容区样式 */
.main-content {
flex: 1;
padding: 20px;
background: #f5f5f5;
}
.sidebar h3 {
margin-bottom: 20px;
transition: opacity 0.3s ease;
}
/* 收缩时隐藏侧边栏文字 */
#sidebar-toggle:checked ~ .sidebar h3 {
opacity: 0;
}
.sidebar ul li {
list-style: none;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-toggle">
<div class="sidebar">
<label for="sidebar-toggle" class="toggle-btn">切换</label>
<h3>导航菜单</h3>
<ul>
<li>首页</li>
<li>用户管理</li>
<li>订单管理</li>
<li>系统设置</li>
</ul>
</div>
<div class="main-content">
<h2>主内容区域</h2>
<p>这里是页面的主要内容部分，侧边栏收缩展开时，该区域会自动调整宽度。</p>
</div>
</body>
</html>
方案二：基于transform位移的实现
这种方案不改变侧边栏的宽度，而是通过transform属性的translateX值将侧边栏移出可视区域，主内容区宽度始终占满剩余空间，动画性能更好。
核心实现步骤
- 侧边栏设置固定宽度，初始位置在可视区域内
- 收缩状态时通过translateX将侧边栏向左移动自身宽度，移出可视区
- 主内容区不需要调整宽度，侧边栏移出后自动占满全屏
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边栏位移实现</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* 隐藏复选框 */
#sidebar-toggle {
display: none;
}
/* 侧边栏样式 */
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 240px;
height: 100vh;
background: #2c3e50;
color: #fff;
padding: 20px;
transition: transform 0.3s ease;
z-index: 100;
}
/* 复选框选中时侧边栏左移隐藏 */
#sidebar-toggle:checked ~ .sidebar {
transform: translateX(-240px);
}
/* 触发按钮样式 */
.toggle-btn {
position: fixed;
left: 260px;
top: 20px;
padding: 8px 16px;
background: #3498db;
color: #fff;
cursor: pointer;
border-radius: 4px;
z-index: 101;
transition: left 0.3s ease;
}
/* 侧边栏收缩时按钮左移 */
#sidebar-toggle:checked ~ .toggle-btn {
left: 20px;
}
/* 主内容区样式 */
.main-content {
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
transition: padding-left 0.3s ease;
padding-left: 260px;
}
/* 侧边栏收缩时主内容区左内边距恢复 */
#sidebar-toggle:checked ~ .main-content {
padding-left: 20px;
}
.sidebar h3 {
margin-bottom: 20px;
}
.sidebar ul li {
list-style: none;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<input type="checkbox" id="sidebar-toggle">
<div class="sidebar">
<h3>导航菜单</h3>
<ul>
<li>首页</li>
<li>用户管理</li>
<li>订单管理</li>
<li>系统设置</li>
</ul>
</div>
<label for="sidebar-toggle" class="toggle-btn">切换侧边栏</label>
<div class="main-content">
<h2>主内容区域</h2>
<p>这里是页面的主要内容部分，侧边栏通过位移实现收缩展开，不会影响主内容区的布局计算。</p>
</div>
</body>
</html>
两种方案的对比
| 对比项 | 宽度变化方案 | 位移变化方案 |
|---|---|---|
| 动画性能 | 一般，宽度变化会触发重排 | 较好，transform只触发合成阶段 |
| 布局影响 | 会影响相邻元素布局 | 脱离文档流，不影响其他元素 |
| 适用场景 | 侧边栏和内容区是flex布局的场景 | 侧边栏需要覆盖内容的场景 |
注意事项
- 过渡动画的时间建议设置在0.2s到0.4s之间，过短没有动画效果，过长会显得拖沓
- 如果侧边栏有文字内容，收缩时可以配合opacity属性隐藏文字，避免内容溢出
- 移动端适配时，可以给侧边栏添加touch事件配合css媒体查询，优化触摸操作体验
- 使用
transition属性时要指定具体的过渡属性，避免过渡所有属性导致性能问题
css侧边栏收缩transitiontransformflex布局修改时间：2026-07-12 02:36:37