实现响应式导航栏需结合HTML结构、CSS媒体查询与JavaScript交互：桌面端通过flex布局水平排列导航项；移动端用媒体查询隐藏列表，显示汉堡按钮；点击按钮通过JavaScript切换.nav-links的active类控制显隐，配合transition可添加过渡效果。关键在于结构语义化、状态类管理及断点适配。
要实现导航栏的响应式折叠，核心是结合CSS媒体查询和一个可切换的菜单按钮（常称为“汉堡图标”），在小屏幕下隐藏导航链接，并通过点击按钮展开或收起。以下是具体实现方式：
1. 基础HTML结构
使用一个包含菜单按钮和导航列表的容器：
2. 默认样式（桌面端）
在大屏幕上，让导航项水平排列：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem;
}
.nav-links {
list-style: none;
display: flex;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
}
3. 小屏幕下的折叠逻辑
使用媒体查询，在屏幕变小时隐藏导航列表，并显示汉堡按钮：
@media (max-width: 768px) {
.nav-toggle {
display: block;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
.nav-links {
display: none;
flex-direction: column;
width: 100%;
margin-top: 1rem;
}
.nav-links.active {
display: flex;
}
}
color: white;
font-size: 1.5rem;
cursor: pointer;
}
.nav-links {
display: none;
flex-direction: column;
width: 100%;
margin-top: 1rem;
}
.nav-links.active {
display: flex;
}
}
初始状态下 .nav-links 在小屏被隐藏，通过 JavaScript 控制 active 类来切换显示。
4. 添加JavaScript控制展开/收起
CSS无法完全控制交互，需简单JS实现点击切换：
document.querySelector('.nav-toggle').addEventListener('click', function() {
document.querySelector('.nav-links').classList.toggle('active');
});
这样在移动端点击汉堡图标时，导航菜单就会动态显示或隐藏。
基本上就这些。配合一点过渡动画（比如加个 transition: max-height 0.3s ease）可以让展开更自然。关键是结构清晰、用类控制状态、媒体查询适配不同设备。不复杂但容易忽略细节。
