侧边栏收缩展开通过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 添加点击事件来切换类名：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
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实现侧边栏收缩展开的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1034467.html
微信扫一扫 
支付宝扫一扫 
