先通过html结构和css媒体查询实现响应式导航菜单。使用div模拟toggle按钮配合span构成汉堡图标，nav-menu在大屏下水平排列，小屏（≤768px）时隐藏并显示可点击的toggle按钮，javascript添加active类控制菜单展开，结合flexbox与display切换实现移动端可折叠导航。
响应式导航菜单在现代网页设计中非常常见，尤其在移动端优先的开发理念下，使用 toggle 按钮 结合 CSS 媒体查询 是实现这一功能的高效方式。下面通过一个简洁实用的实践案例，展示如何用纯 HTML 和 CSS 实现一个可折叠的响应式导航菜单。
HTML 结构：语义化与可访问性
先构建基础结构，包含一个用于小屏幕切换的按钮（toggle）和一个导航容器：
<nav class="navbar">
<div class="nav-toggle" id="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<ul class="nav-menu">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
这里使用 div 模拟按钮（实际项目建议用 button 元素提升可访问性），三个 span 构成汉堡图标，ul 包含导航链接。
CSS 样式：默认桌面布局
在大屏幕上，导航菜单水平排列，toggle 按钮隐藏：
立即学习“前端免费学习笔记（深入）”；
.navbar {
background: #333;
padding: 1rem;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu li a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.nav-toggle {
display: none;
}
利用 Flexbox 让菜单项横向分布，文字颜色与背景形成对比，适合阅读。
媒体查询：适配移动设备
当屏幕宽度小于或等于 768px 时，启用响应式行为：
@media (max-width: 768px) {
.nav-toggle {
display: block;
cursor: pointer;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 5px auto;
transition: 0.3s;
}
.nav-menu {
display: none;
flex-direction: column;
background: #444;
}
.nav-menu.active {
display: flex;
}
}
关键点：
- 小屏下显示 toggle 按钮，三道横线构成“汉堡”图标
- 原始状态下 nav-menu 隐藏（display: none）
- 添加 .active 类后菜单显示为垂直列表
JavaScript 辅助：切换菜单状态
虽然问题聚焦 CSS，但 toggle 功能通常需要少量 JS 控制类的切换：
document.getElementById('mobile-toggle').addEventListener('click', function() {
document.querySelector('.nav-menu').classList.toggle('active');
});
点击按钮时切换 active 类，触发 CSS 中定义的 display: flex 显示菜单。这是最轻量的交互实现方式。
基本上就这些。通过合理使用媒体查询和类状态控制，可以创建出体验良好的响应式导航。样式与结构分离清晰，维护方便，适合大多数中小型项目。
