从零开始构建你的第一个响应式导航菜单：纯HTML/CSS/JS教程
在现代Web开发中，一个流畅、自适应的导航菜单是用户界面的核心元素。无论你是初学者还是有一定经验的开发者，掌握如何用纯前端技术构建响应式菜单都是一项基础且重要的技能。本教程将带你从零开始，通过四个简单步骤，创建一个包含折叠功能的移动端友好导航栏。你只需要一个文本编辑器和一个浏览器，不需要任何框架或库。
准备工作：在开始之前，确保你的开发环境已经就绪。推荐使用VS Code或Sublime Text作为编辑器，并在浏览器中打开一个新的标签页来实时查看效果。我们将所有代码保存在一个HTML文件中，方便学习和测试。
第一步：构建HTML结构首先，我们需要定义导航菜单的骨架。一个典型的导航包含品牌标识（Logo）、菜单项列表和一个用于移动端的切换按钮。以下是一个基础的HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式导航菜单示例</title>
</head>
<body>
<nav class="navbar">
<div class="brand">我的网站</div>
<a href="#" class="toggle-button" id="toggleBtn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-list" id="navMenu">
<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>
<!-- 其他页面内容 -->
</body>
</html>
在这个结构中，nav元素包裹了整个导航。.brand用于显示品牌名称，.toggle-button是汉堡菜单按钮，它由三条横线（.bar）构成。.nav-list包含了主要菜单项。注意我们给按钮和列表分别分配了id属性，这将用于后续的JavaScript交互。
现在，让导航菜单具备基础的视觉效果和响应式行为。我们将使用Flexbox进行布局，并通过媒体查询在移动视口下切换显示模式。在<head>中添加以下样式：
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 0 20px;
height: 60px;
}
.brand {
font-size: 1.5em;
font-weight: bold;
}
.nav-list {
list-style: none;
display: flex;
gap: 20px;
}
.nav-list li a {
color: white;
text-decoration: none;
padding: 8px 15px;
transition: background-color 0.3s;
}
.nav-list li a:hover {
background-color: #555;
border-radius: 5px;
}
/* 汉堡菜单按钮样式 - 默认隐藏 */
.toggle-button {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background-color: white;
margin: 4px 0;
border-radius: 2px;
}
/* 响应式样式：屏幕宽度小于768px时切换 */
@media (max-width: 768px) {
.toggle-button {
display: flex;
}
.nav-list {
display: none; /* 默认隐藏菜单 */
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: #333;
padding: 10px 0;
text-align: center;
}
.nav-list.active {
display: flex; /* 添加active类时显示 */
}
.nav-list li {
margin: 10px 0;
}
}
</style>
这里的关键点是：在桌面端，.nav-list以水平Flex布局显示，汉堡按钮.toggle-button隐藏。当屏幕宽度小于768px时，我们通过媒体查询隐藏菜单列表，并让汉堡按钮可见。同时，我们定义了一个.active类，当添加到.nav-list时，菜单会以垂直方向显示。这个类将由JavaScript在点击时添加或移除。
CSS完成了静态响应式布局，但用户交互（点击汉堡按钮切换菜单显示）需要JavaScript来完成。在<body>结束之前添加以下脚本：
<script>
// 获取DOM元素
const toggleButton = document.getElementById('toggleBtn');
const navMenu = document.getElementById('navMenu');
// 为切换按钮添加点击事件监听
toggleButton.addEventListener('click', function() {
// 切换菜单的active类
navMenu.classList.toggle('active');
});
// 可选：点击菜单项后自动关闭菜单（提升移动端体验）
const navLinks = document.querySelectorAll('.nav-list li a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
navMenu.classList.remove('active');
});
});
</script>
这段代码的核心是toggle()方法，它会检查元素是否包含指定类名：如果有则移除，如果没有则添加。当用户点击汉堡按钮时，.active类被附加到导航菜单上，CSS条件触发，菜单显示。forEach循环绑定的额外事件，确保用户点击任意菜单项后，菜单会自动折叠回去，这在触摸屏设备上提供了更自然的使用体验。
完成上述步骤后，在浏览器中打开HTML文件。你应该能在桌面端看到一个水平的导航栏，在移动端（调整浏览器窗口宽度或使用开发者工具的设备模拟模式）看到汉堡按钮。
如果遇到问题，请检查以下几点：
- 确保meta viewport标签已正确添加，否则移动端可能无法正确缩放。
- 检查JavaScript是否有拼写错误，如getElementById的拼写，以及classList是否正确。
- CSS选择器的优先级：如果你在其他地方定义了相同的类，可能会产生冲突。可以使用浏览器的开发者工具（F12）来检查样式是否被覆盖。
你可以进一步优化：添加CSS过渡动画让菜单展开更平滑，为导航添加粘性定位（sticky），或者集成图标库美化汉堡按钮。例如，给.nav-list添加transition: opacity 0.3s ease;可以使其出现时带有淡入效果。但要注意，display: none/block不支持过渡，你可以改用visibility和opacity组合，或者用max-height实现滑动效果。
通过这个教程，你不仅创建了一个实用的导航菜单，还练习了HTML语义化、CSS Flexbox布局、媒体查询以及DOM事件处理。这些技能是构建任何现代网站的基础。尝试修改样式、增加更多交互（如下拉子菜单），让你的导航菜单更具特色吧！