css响应式侧边栏折叠与展开-css教程-PHP中文网

css响应式侧边栏折叠与展开

P粉602998670

发布： 2025-09-24 11:57:02

原创

299人浏览过

答案：通过CSS媒体查询、Flexbox布局和JavaScript类切换实现响应式侧边栏。1. HTML构建侧边栏与主内容区；2. CSS使用Flexbox与transition实现动画，媒体查询适配移动端；3. JavaScript根据屏幕宽度切换collapsed或active类，支持折叠与滑出；4. 建议优化包括图标替换、遮罩层、ESC关闭、状态记忆，提升交互体验。

css响应式侧边栏折叠与展开

实现一个响应式侧边栏的折叠与展开功能，关键在于结合 CSS 媒体查询、Flexbox 布局和简单的 JavaScript 控制类切换。下面是一个简洁实用的实现方式，适配桌面和移动端。

1. HTML 结构

构建基础布局：包含一个可切换的侧边栏和主内容区域。

<div class="layout">
  <aside class="sidebar" id="sidebar">
    <div class="toggle-btn" onclick="toggleSidebar()">☰</div>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">设置</a></li>
      <li><a href="#">帮助</a></li>
    </ul>
  </aside>
<p><main class="main-content">
<h1>主内容区</h1>
<p>这里是页面主要内容。点击左上角 ☰ 可折叠/展开侧边栏。</p>
</main>
</div></p>

登录后复制

2. CSS 样式与响应式设计

使用 Flexbox 布局，配合媒体查询和过渡动画，实现平滑展开与折叠效果。

立即学习“前端免费学习笔记（深入）”；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
<p>.layout {
display: flex;
min-height: 100vh;
font-family: Arial, sans-serif;
}</p><p>.sidebar {
width: 250px;
background: #2c3e50;
color: white;
transition: transform 0.3s ease, width 0.3s ease;
overflow: hidden;
}</p><p>.sidebar ul {
list-style: none;
padding: 20px 0;
}</p><p>.sidebar ul li a {
color: #ecf0f1;
text-decoration: none;
display: block;
padding: 15px 20px;
transition: background 0.3s;
}</p><p>.sidebar ul li a:hover {
background: #34495e;
}</p><p>.toggle-btn {
text-align: center;
padding: 15px;
font-size: 20px;
background: #34495e;
cursor: pointer;
}</p><p>/<em> 折叠状态 </em>/
.sidebar.collapsed {
width: 60px;
}</p><p>.sidebar.collapsed ul {
padding: 20px 0;
}</p><p>.sidebar.collapsed ul li a {
text-align: center;
font-size: 18px;
padding: 15px 0;
}</p><p>.sidebar.collapsed .sidebar-text {
display: none;
}</p><p>/<em> 主内容区自适应 </em>/
.main-content {
flex: 1;
padding: 20px;
background: #ecf0f1;
}</p><p>/<em> 移动端适配：小屏幕下侧边栏默认折叠 </em>/
@media (max-width: 768px) {
.sidebar {
position: fixed;
z-index: 1000;
transform: translateX(-100%);
width: 250px;
}</p><p>.sidebar.active {
transform: translateX(0);
}</p><p>.main-content {
margin-left: 0;
}
}</p>

登录后复制

3. JavaScript 控制切换

通过 JS 切换类名，控制侧边栏展开或折叠。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

立即学习“前端免费学习笔记（深入）”；

function toggleSidebar() {
  const sidebar = document.getElementById("sidebar");
  // 桌面端：切换 collapsed 类
  if (window.innerWidth > 768) {
    sidebar.classList.toggle("collapsed");
  } else {
    // 移动端：滑出式菜单
    sidebar.classList.toggle("active");
  }
}
<p>// 屏幕大小变化时重置状态
window.addEventListener("resize", () => {
const sidebar = document.getElementById("sidebar");
if (window.innerWidth > 768) {
sidebar.classList.remove("active"); // 移除移动端激活状态
} else {
sidebar.classList.remove("collapsed"); // 移动端不显示 collapsed 效果
}
});</p>

登录后复制