实现折叠导航菜单需结合HTML结构、CSS样式与JavaScript交互。1. 创建包含汉堡按钮和导航列表的HTML结构；2. 使用CSS设置按钮样式及菜单隐藏状态，通过transform、opacity和visibility控制显示，并添加过渡动画；3. 用JavaScript为按钮绑定点击事件，切换nav-menu和hamburger的active类，触发菜单展开/收起及按钮“变叉”动画；4. 汉堡按钮三条线在active状态下分别旋转与透明化，形成“X”形，提升视觉反馈。关键在于transition实现流畅动画，transform避免重排，visibility与opacity配合确保正确隐藏元素并支持动画效果。
实现一个带有汉堡按钮（Hamburger Button）和动画效果的折叠导航菜单，是CSS初级项目中常见的交互需求。关键在于使用纯HTML与CSS（配合少量JavaScript）控制菜单的展开与收起，并添加过渡动画提升用户体验。
1. 创建基础HTML结构
导航通常包含一个汉堡按钮和一个菜单容器。按钮用于触发菜单显示或隐藏，菜单项放在一个列表中。
2. 使用CSS设计汉堡按钮与菜单样式
通过CSS设置初始隐藏状态，设计按钮外观，并准备动画过渡。
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #333;
}
.hamburger {
display: flex;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: #fff;
margin: 3px 0;
transition: 0.3s;
border-radius: 2px;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
transform: translateY(-150%);
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
flex-direction: column;
background: #444;
position: absolute;
top: 60px;
left: 0;
right: 0;
text-align: center;
}
.nav-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-menu li a {
color: white;
text-decoration: none;
padding: 1rem;
display: block;
font-size: 1rem;
}
3. 添加JavaScript控制切换
用简单的脚本为汉堡按钮绑定点击事件，切换菜单的“active”类来控制显示状态。
立即学习“前端免费学习笔记（深入）”；
const hamburger = document.getElementById("hamburger");
const navMenu = document.getElementById("navMenu");
hamburger.addEventListener("click", () => {
navMenu.classList.toggle("active");
});
点击时，toggle 方法会为 nav-menu 切换 active 类，从而触发动画展开或收起菜单。
4. 汉堡按钮动画效果增强体验
让按钮在点击时也产生“变叉”动画，提升视觉反馈。
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
同时在JS中为按钮也添加类切换：
hamburger.addEventListener("click", () => {
navMenu.classList.toggle("active");
hamburger.classList.toggle("active");
});
这样，按钮三条线会动态变成“X”形，表示可关闭菜单。
基本上就这些。通过结构 + 样式 + 少量交互逻辑，就能实现一个简洁流畅的折叠导航菜单。重点是利用 transition 实现平滑动画，用 transform 控制位移避免重排，再结合类切换管理状态。不复杂但容易忽略细节，比如 visibility 配合 opacity 才能真正隐藏元素并支持动画。
