CSS侧边栏展开收缩实现方法

想要实现酷炫的侧边栏展开收缩效果吗？本文将详细讲解如何使用CSS轻松实现这一功能，无需复杂的JavaScript代码！通过控制侧边栏的宽度和外边距，并巧妙运用`transition`属性，即可打造流畅的动画效果。文章将从HTML结构入手，逐步介绍如何设置默认展开状态、收缩状态样式，以及如何通过简单的JavaScript或`:hover`伪类实现交互。核心在于理解`width`与`margin`的联动，以及过渡动画和状态类的控制。同时，我们也会提醒您注意`overflow`隐藏和`box-sizing`适配等细节，确保最佳的用户体验。还在等什么？快来学习，为你的网站增添一份动感与活力吧！

侧边栏收缩展开通过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 控制宽度或位移，配合过渡动画让效果更自然。结合简单的 HTML 结构和少量 CSS 即可完成，也可以加入 JavaScript 增强交互。

1. 基础结构

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

  
☰
  

    
首页
    
设置
    
用户
  


  
主内容区

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学习网公众号！