如何用css实现侧边栏收缩展开-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-03 11:45:02

原创

590人浏览过

侧边栏收缩展开通过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 添加点击事件来切换类名：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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实现侧边栏收缩展开的详细内容，更多请关注php中文网其它相关文章！