通过CSS媒体查询和JavaScript实现移动端汉堡菜单。1. 构建包含导航项和切换按钮的HTML结构；2. 桌面端默认显示水平导航，隐藏按钮；3. 屏幕小于768px时，显示汉堡按钮并隐藏导航菜单；4. 点击按钮通过JavaScript切换active类控制菜单显隐；5. 可用max-height过渡实现滑动动画效果，提升用户体验。
在移动端设备上，屏幕宽度有限，传统的水平导航栏可能无法完整显示。通过CSS的媒体查询（@media）结合 display: none 与 display: block 的切换，可以实现导航栏在小屏幕上折叠成“汉堡菜单”的效果。以下是具体实现方法。
1. 基础HTML结构
构建一个包含导航栏和切换按钮的基本结构：
2. 默认样式：桌面端显示完整导航
在大屏幕上，导航项水平排列，隐藏切换按钮：
.navbar {
background: #333;
padding: 1rem;
}
.nav-menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.nav-menu li {
margin: 0 1rem;
}
.nav-menu a {
color: white;
text-decoration: none;
}
.nav-toggle {
display: none; / 桌面端隐藏 /
}
3. 媒体查询：移动端折叠导航
当屏幕宽度小于768px时，使用媒体查询隐藏默认菜单，显示汉堡按钮，并设置折叠菜单初始为隐藏状态：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.nav-toggle {
display: block; /* 显示汉堡按钮 */
cursor: pointer;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: white;
margin: 5px 0;
display: block;
transition: 0.3s;
}
.nav-menu {
display: none; / 默认隐藏菜单 /
flex-direction: column;
background: #444;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.nav-menu.active {
display: flex; / 激活时显示 /
}
}
4. JavaScript控制菜单开关
添加简单脚本控制菜单的展开与收起：
const mobileMenu = document.getElementById('mobile-menu');
const navMenu = document.querySelector('.nav-menu');
mobileMenu.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
点击汉堡按钮时，.nav-menu 切换 active 类，从而改变其 display 属性，在 none 与 flex 之间切换，实现显示与隐藏。
5. 可选：添加动画效果
为了让菜单出现更自然，可配合 max-height 实现滑动展开（因 display 不支持过渡动画）：
@media (max-width: 768px) {
.nav-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav-menu.active {
max-height: 300px; / 足够容纳所有菜单项 /
display: flex; / 仍需 display 控制布局 /
}
}
这样在切换时会有平滑展开效果，视觉体验更好。
基本上就这些。利用 media queries 判断屏幕尺寸，用 display 控制元素显隐，再加一点JavaScript交互，就能实现响应式导航栏的折叠功能。不复杂但容易忽略细节，比如初始隐藏、类名切换和移动端适配断点选择。
