侧边栏折叠菜单通过HTML结构、CSS样式和JavaScript交互实现，点击按钮切换类名控制侧边栏宽度与主内容区联动位移，配合过渡动画实现平滑效果。
实现一个CSS初级项目中的侧边栏折叠菜单，核心是利用HTML结构搭配CSS样式控制显示与隐藏。可以通过点击按钮切换类名，用CSS控制侧边栏的宽度或位移来达到“折叠”效果。下面是一个简单实用的实现方法。
1. 基本HTML结构
构建一个包含侧边栏、按钮和主内容区的基本布局：
<div class="sidebar"><div class="toggle-btn" id="toggleBtn">☰</div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">设置</a></li>
</ul>
</div>
<div class="main-content">
<h2>主内容区域</h2>
</div>
2. CSS样式设计
使用CSS定义侧边栏展开和折叠状态。默认展开，点击后通过JavaScript添加类实现收缩。
.sidebar {width: 200px;
height: 100vh;
background-color: #333;
color: white;
transition: width 0.3s ease;
}
.sidebar.collapsed {
width: 60px;
}
.menu a {
display: block;
padding: 15px;
color: white;
text-decoration: none;
font-size: 14px;
text-align: center;
}
.menu a::before {
display: block;
margin-bottom: 5px;
}
.sidebar.collapsed .menu a {
font-size: 12px;
}
.sidebar.collapsed .menu a span {
display: none;
}
.toggle-btn {
text-align: center;
padding: 15px;
font-size: 20px;
cursor: pointer;
}
.main-content {
margin-left: 200px;
padding: 20px;
transition: margin-left 0.3s ease;
}
.sidebar.collapsed ~ .main-content {
margin-left: 60px;
}
3. 添加JavaScript交互
用少量JS实现点击切换折叠状态：
立即学习“前端免费学习笔记（深入）”；
<script>document.getElementById("toggleBtn").addEventListener("click", function() {
document.querySelector(".sidebar").classList.toggle("collapsed");
});
</script>
点击按钮时，给侧边栏切换 collapsed 类，CSS中的 transition 会让动画平滑进行。菜单文字在折叠状态下隐藏，只保留图标（可配合字体图标扩展）。
基本上就这些。不复杂但容易忽略细节，比如过渡动画、主内容区联动偏移、文字隐藏处理等。掌握这个模式后可以进一步加入图标库、子菜单展开等功能。
