在移动端实现css导航栏折叠，核心是通过响应式设计和简单的交互控制菜单的显示与隐藏。重点在于使用媒体查询适配小屏幕，并结合html与CSS（有时配合少量javaScript）实现点击展开/收起的效果。
1. 响应式布局基础
使用媒体查询判断设备屏幕宽度，当屏幕较小时隐藏默认导航链接，显示一个“菜单按钮”（通常称为汉堡图标）。
基本结构如下：
<nav class="navbar"> <div class="nav-toggle" id="mobile-menu"> <span></span> <span></span> <span></span> </div> <ul class="nav-links"> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系</a></li> </ul> </nav>
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控制类名，就能在移动端实现一个简洁实用的折叠导航栏。不复杂但容易忽略细节。