响应式侧边栏折叠是后台管理系统和移动端页面中非常实用的功能，用户可以在大屏幕下看到完整的侧边栏导航，在小屏幕下通过折叠侧边栏节省页面空间，仅用CSS就能实现这个效果，不需要额外编写JavaScript逻辑。
实现核心思路
实现这个功能主要依赖两个CSS特性：媒体查询和flex布局。媒体查询用来判断当前屏幕宽度，在不同宽度下给侧边栏设置不同的宽度和显示状态；flex布局用来保证侧边栏折叠或展开时，右侧内容区域能自动填充剩余空间，不会出现布局错乱。
基础HTML结构
首先搭建页面的基础结构，分为侧边栏和主内容区域两个部分，外层用一个容器包裹，方便使用flex布局：
<div class="layout">
<aside class="sidebar">
<div class="sidebar-header">导航菜单</div>
<ul class="sidebar-menu">
<li>首页</li>
<li>用户管理</li>
<li>订单管理</li>
<li>系统设置</li>
</ul>
</aside>
<main class="main-content">
<h1>页面主内容区域</h1>
<p>这里是页面的核心内容，侧边栏折叠时该区域会自动扩展宽度。</p>
</main>
</div>
基础CSS样式设置
先给容器和两个部分设置基础样式，开启flex布局，侧边栏默认设置固定宽度，主内容区域设置flex为1，自动占满剩余空间：
/* 外层布局容器 */
.layout {
display: flex;
min-height: 100vh;
margin: 0;
padding: 0;
}
/* 侧边栏默认样式 */
.sidebar {
width: 240px;
background-color: #2c3e50;
color: #fff;
transition: width 0.3s ease; /* 宽度变化添加过渡动画 */
overflow: hidden; /* 折叠时隐藏超出内容 */
}
/* 侧边栏头部 */
.sidebar-header {
padding: 20px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid #34495e;
}
/* 侧边栏菜单 */
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu li {
padding: 15px 20px;
cursor: pointer;
border-bottom: 1px solid #34495e;
}
.sidebar-menu li:hover {
background-color: #34495e;
}
/* 主内容区域 */
.main-content {
flex: 1; /* 自动填充剩余空间 */
padding: 20px;
background-color: #f5f7fa;
}
添加响应式折叠逻辑
接下来通过媒体查询设置小屏幕下的侧边栏样式，当屏幕宽度小于768px时，将侧边栏宽度设置为60px，只显示图标或者精简内容，实现折叠效果：
/* 屏幕宽度小于768px时的样式 */
@media screen and (max-width: 768px) {
.sidebar {
width: 60px; /* 折叠后的宽度 */
}
.sidebar-header {
text-align: center;
padding: 20px 5px;
font-size: 14px;
}
.sidebar-menu li {
text-align: center;
padding: 15px 5px;
font-size: 14px;
}
}
优化折叠交互体验
如果需要在大屏幕下也支持手动切换折叠状态，可以结合CSS伪类或者复选框 hack 实现，这里以复选框方案为例，不需要JavaScript就能实现点击切换折叠：
修改HTML结构
添加一个隐藏的复选框作为折叠开关，放在侧边栏内部：
<div class="layout">
<aside class="sidebar">
<input type="checkbox" id="sidebar-toggle" class="sidebar-toggle">
<label for="sidebar-toggle" class="toggle-btn">切换</label>
<div class="sidebar-header">导航菜单</div>
<ul class="sidebar-menu">
<li>首页</li>
<li>用户管理</li>
<li>订单管理</li>
<li>系统设置</li>
</ul>
</aside>
<main class="main-content">
<h1>页面主内容区域</h1>
<p>点击侧边栏上方的切换按钮可以手动折叠或展开侧边栏。</p>
</main>
</div>
添加切换相关CSS
隐藏复选框，通过复选框的选中状态控制侧边栏宽度：
/* 隐藏复选框 */
.sidebar-toggle {
display: none;
}
/* 切换按钮样式 */
.toggle-btn {
display: block;
padding: 10px;
text-align: center;
background-color: #34495e;
cursor: pointer;
font-size: 14px;
}
/* 复选框选中时侧边栏折叠 */
.sidebar-toggle:checked + .toggle-btn + .sidebar-header,
.sidebar-toggle:checked + .toggle-btn + .sidebar-header + .sidebar-menu {
display: none;
}
.sidebar-toggle:checked ~ .sidebar-header,
.sidebar-toggle:checked ~ .sidebar-menu {
display: none;
}
.sidebar-toggle:checked + .toggle-btn {
content: "展开";
}
.sidebar-toggle:checked ~ .toggle-btn {
background-color: #1abc9c;
}
常见问题说明
- 侧边栏折叠时出现内容溢出：给侧边栏添加
overflow: hidden属性，宽度变小时隐藏超出区域的内容。 - 过渡动画不生效：确保给宽度属性设置了
transition，且宽度变化是具体数值，不是auto。 - flex布局下主内容区域没有自适应：检查主内容区域是否设置了
flex: 1，或者flex-grow: 1。
这种纯CSS实现的方案兼容性较好，支持所有现代浏览器，在不需要复杂交互的场景下完全可以替代JavaScript实现，减少代码体积。