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