响应式侧边栏通过CSS媒体查询和隐藏复选框实现折叠功能，小屏幕下点击汉堡按钮触发侧边栏滑出，大屏则始终显示。1. 结构包含复选框、标签、侧边栏和主内容区；2. 使用Flex布局与transform控制显示状态；3. 媒体查询在768px以下启用移动样式；4. 可选遮罩层增强交互体验。该方案轻量且兼容性好，适用于移动端导航。
响应式侧边栏折叠在现代网页布局中非常常见，尤其适用于移动端或小屏幕设备。实现的关键在于结合 CSS 媒体查询（@media）与合适的布局结构，有时配合少量 JavaScript 控制开关状态。下面介绍一种纯 CSS 和轻量 JS 结合的实现方式。
基本 HTML 结构
先搭建一个简单的页面结构，包含头部、主内容区和侧边栏：
- 首页
- 产品
- 关于
- 联系
这里是页面主要内容。主内容区
CSS 样式与响应式布局
使用 Flexbox 布局，并通过媒体查询控制侧边栏在不同屏幕下的显示方式：
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 240px;
background: #333;
color: white;
transition: transform 0.3s ease;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
}
.sidebar a:hover {
background: #555;
}
.main-content {
flex: 1;
padding: 20px;
background: #f4f4f4;
}
/ 汉堡按钮样式 /
.hamburger {
position: absolute;
top: 15px;
left: 15px;
font-size: 24px;
cursor: pointer;
display: none;
z-index: 10;
}
/ 小屏幕下的响应式处理 /
@media (max-width: 768px) {
.hamburger {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
transform: translateX(-100%);
}
/ 当复选框被勾选时，展开侧边栏 /
.sidebar-toggle:checked + .hamburger + .sidebar {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
}
行为逻辑说明
利用隐藏的 checkbox 作为“开关”来控制侧边栏的展开与收起：
- 默认状态下，侧边栏在小屏幕上被移出视窗外（translateX(-100%)）
- 点击汉堡图标会触发 checkbox 的勾选状态
- CSS 利用
:checked伪类选择器控制侧边栏的 transform 变化 - 大屏幕上侧边栏始终可见，不启用折叠功能
可选增强：添加遮罩层
若希望在侧边栏展开时添加半透明遮罩以提升用户体验，可以加入一个 overlay 层：
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.sidebar-toggle:checked ~ .overlay {
opacity: 1;
visibility: visible;
}
并将 放在 后面，与侧边栏同级。
基本上就这些。这种方案无需 JavaScript 即可实现基础交互，结构清晰，兼容性好，适合大多数响应式管理后台或移动端导航场景。
