在移动端实现CSS导航栏折叠，核心是通过响应式设计和简单的交互控制菜单的显示与隐藏。重点在于使用媒体查询适配小屏幕，并结合HTML与CSS（有时配合少量JavaScript）实现点击展开/收起的效果。
1. 响应式布局基础
使用媒体查询判断设备屏幕宽度，当屏幕较小时隐藏默认导航链接，显示一个“菜单按钮”（通常称为汉堡图标）。
基本结构如下：
2. 使用CSS控制折叠行为
默认在桌面端横向显示菜单；移动端通过CSS将 .nav-links 设为隐藏，点击按钮时再显示。
立即学习“前端免费学习笔记（深入）”；
关键样式设置：
- 桌面端：导航项水平排列，
display: flex - 移动端：用媒体查询将菜单设为
display: none，垂直堆叠展示时使用flex-direction: column - 汉堡图标通过伪元素或三道横线模拟，点击后切换类名控制显隐
示例CSS：
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li a {
padding: 1rem;
text-decoration: none;
color: #333;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: #333;
margin: 3px 0;
transition: 0.3s;
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background: #f4f4f4;
}
.nav-links.active {
display: flex;
}
.nav-toggle {
display: flex;
}
}
3. 添加JavaScript交互
仅靠CSS无法完成点击切换，需用JavaScript为按钮绑定事件，动态添加或移除 active 类来控制菜单显示。
脚本示例：
const menu = document.getElementById('mobile-menu');
const navLinks = document.querySelector('.nav-links');
menu.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
这样用户点击汉堡图标时，导航列表会在移动端弹出或收起。
4. 可访问性与用户体验优化
增强体验的小建议：
- 给菜单按钮添加
aria-label="Toggle navigation" - 菜单展开时禁用页面滚动，避免误触
- 可加入淡入滑动动画提升视觉效果，例如使用
max-height + overflow: hidden实现平滑展开
基本上就这些。用好媒体查询、灵活布局和简单JS控制类名，就能在移动端实现一个简洁实用的折叠导航栏。不复杂但容易忽略细节。
