响应式导航通过媒体查询在小屏时隐藏横排菜单，结合CSS或JavaScript实现汉堡菜单展开功能，提升移动端体验。
在响应式网页设计中，导航菜单的折叠功能是提升移动端用户体验的关键。屏幕变小时，传统横排导航会挤占空间甚至错位，这时需要通过CSS媒体查询结合隐藏与显示技巧，将导航收起为“汉堡菜单”，点击后展开。实现这一效果不依赖JavaScript也能完成，但加上JS能获得更流畅交互。
使用CSS媒体查询控制显示断点
媒体查询（@media）是响应式布局的核心工具。通过设定屏幕宽度临界点，可以切换导航的布局方式。
例如，在桌面端显示横向菜单，在768px以下切换为垂直堆叠并隐藏：
nav ul {
list-style: none;
padding: 0;
display: flex;
}
<p>@media (max-width: 768px) {
nav ul {
flex-direction: column;
display: none; /<em> 默认隐藏 </em>/
}
.menu-toggle {
display: block; /<em> 显示汉堡按钮 </em>/
}
}</p>利用隐藏与伪类实现纯CSS折叠
如果不想引入JavaScript，可以用复选框配合
立即学习“前端免费学习笔记（深入）”；
结构示例：
<input type="checkbox" id="menu-toggle" class="menu-checkbox"> <label for="menu-toggle" class="menu-icon">☰</label> <ul class="nav-menu"> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> </ul>
CSS控制显示：
.menu-checkbox {
display: none;
}
.menu-checkbox:checked ~ .nav-menu {
display: flex;
}
@media (min-width: 769px) {
.menu-icon, .menu-checkbox { display: none; }
.nav-menu { display: flex !important; }
}
添加JavaScript增强交互体验
更常见的做法是用JavaScript控制class切换，代码更清晰，也便于扩展动画或过渡效果。
给菜单按钮绑定点击事件：
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.nav-menu').classList.toggle('show');
});
配合CSS定义.show类的样式：
.nav-menu.show {
display: flex;
}
还可以加入过渡动画让展开更自然：
.nav-menu {
transition: max-height 0.3s ease;
overflow: hidden;
}
基本上就这些。关键在于合理设置媒体查询断点，选择适合项目的显隐控制方式——纯CSS适合轻量需求，JavaScript更适合复杂交互。搭配flex布局和移动优先原则，能让导航在各种设备上都表现良好。
