CSS初级项目侧边栏响应式折叠如何实现_Media query与transform动画使用流程-css教程-PHP中文网

CSS初级项目侧边栏响应式折叠如何实现_Media query与transform动画使用流程

P粉602998670

发布： 2025-11-21 13:48:06

原创

820人浏览过

答案：通过HTML结构搭建侧边栏与主内容区，利用flex布局设置固定与自适应宽度，结合transform实现平滑动画，JavaScript控制collapsed类切换状态，配合@media query在小屏下默认隐藏侧边栏并添加遮罩层优化交互体验。

css初级项目侧边栏响应式折叠如何实现_media query与transform动画使用流程

实现一个响应式可折叠的侧边栏，核心是结合 CSS 的 @media query 判断屏幕尺寸，配合 transform 实现平滑动画效果。整个流程不复杂，关键在于结构清晰和状态管理。

1. 布局结构与基础样式

先搭建基本 HTML 结构，包含一个侧边栏和主内容区域：

<div class="layout">
  <aside class="sidebar">
    <ul>
      <li>首页</li>
      <li>设置</li>
      <li>用户</li>
    </ul>
  </aside>
  <main class="main-content">
    <button class="toggle-btn">☰ 菜单</button>
    <h1>主内容区</h1>
  </main>
</div>

登录后复制

给侧边栏固定宽度，主内容自适应，使用 flex 布局：

.layout {
  display: flex;
}

.sidebar {
  width: 250px;
  background: #333;
  color: white;
  height: 100vh;
  transition: transform 0.3s ease;
}

.main-content {
  flex: 1;
  padding: 20px;
}

登录后复制

2. 添加折叠状态与按钮控制

通过 JavaScript 给 body 或 sidebar 添加类名（如 collapsed）来表示折叠状态：

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

document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.sidebar').classList.toggle('collapsed');
});

登录后复制

用 transform 将侧边栏移出可视区域：

Tellers AI

Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。

查看详情

.sidebar.collapsed {
  transform: translateX(-250px);
}

登录后复制

此时侧边栏会平滑滑出，点击按钮再滑回，动画由 transition 控制。

3. 使用 Media Query 自适应小屏

在移动端默认折叠侧边栏，用户点击再展开：

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 100;
  }

  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    transform: translateX(-250px);
  }

  .main-content {
    margin-left: 0;
  }
}

登录后复制

这样在小屏幕上，侧边栏默认隐藏，点击按钮后出现，不影响主内容布局。