首页 > 文章 > 前端

CSS侧边栏展开收缩实现技巧

时间：2026-01-27 18:21:39 366浏览收藏

一分耕耘，一分收获！既然都打开这篇《CSS实现侧边栏展开收缩方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

侧边栏收缩展开通过CSS控制宽度与外边距，结合transition实现动画效果。1. 结构包含sidebar和content区域；2. 默认sidebar宽200px，content左margin同步设置；3. 添加collapsed类使sidebar宽度变为60px，隐藏菜单项，content margin相应缩小；4. JavaScript点击toggle-btn切换collapsed类，实现交互；也可用:hover悬停触发。关键在于width与margin联动、过渡动画及状态类控制，注意overflow隐藏与box-sizing适配。

如何用css实现侧边栏收缩展开

实现侧边栏的收缩与展开，核心是通过 CSS 控制宽度或位移，配合过渡动画让效果更自然。结合简单的 HTML 结构和少量 CSS 即可完成，也可以加入 JavaScript 增强交互。

1. 基础结构

先定义一个基本的侧边栏结构：

<div class="sidebar">
  <div class="toggle-btn">☰</div>
  <ul>
    <li>首页</li>
    <li>设置</li>
    <li>用户</li>
  </ul>
</div>
<div class="content">
  <p>主内容区</p>
</div>

2. 默认展开状态

设置侧边栏默认宽度，使用 transition 实现平滑动画：

.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #333;
  color: white;
  padding: 20px 0;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 15px 20px;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #555;
}

.content {
  margin-left: 200px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

3. 收缩状态样式

添加一个 .collapsed 类，用于切换收缩状态：

.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed + .content {
  margin-left: 60px;
}

.sidebar.collapsed li {
  display: none;
}

.sidebar.collapsed .toggle-btn {
  font-size: 18px;
  text-align: center;
}

4. 使用 JavaScript 切换状态

用 JS 添加点击事件来切换类名：

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

点击按钮后，侧边栏宽度从 200px 缩为 60px，主内容区域同步调整 margin，视觉上实现“收缩展开”效果。

如果不想依赖 JS，也可以用 :hover 实现悬停展开：

.sidebar:hover {
  width: 200px;
}

.sidebar:hover li {
  display: block;
}

这种方案适合工具类侧边栏，用户悬停时显示文字菜单。

基本上就这些。关键点在于用 transition 实现动画，通过改变 width 和 margin 联动布局，再用类控制状态切换。不复杂但容易忽略细节，比如 overflow 隐藏内容、box-sizing 防止撑破等。

终于介绍完啦！小伙伴们，这篇关于《CSS侧边栏展开收缩实现技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

前往漫画官网入口并下载 ➜