在现代Web设计中，响应式导航菜单（Responsive Navigation Menu）是一个非常重要的组件。它能够根据用户所使用的设备自动适配不同的屏幕尺寸，提供良好的用户体验和可用性。
在本篇博客中，我将向大家介绍如何使用JavaScript来开发一个简单但功能丰富的响应式导航菜单。
HTML 结构
首先，我们需要一个基本的HTML结构来构建导航菜单。以下是一个简单的例子：
<nav class="nav-menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
上述代码中，我们使用了一个<nav>元素作为导航菜单的容器，内部使用了一个<ul>无序列表来存放菜单项。
CSS 样式
接下来，我们需要一些CSS样式来定义导航菜单的外观和行为。以下是一个简单的例子：
.nav-menu {
background-color: #f1f1f1;
}
.nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 10px;
}
.nav-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.nav-menu li a:hover {
background-color: #ddd;
}
上述代码中，我们定义了导航菜单的一些基本样式，包括背景颜色、列表样式，以及菜单项和链接样式。
JavaScript 动态效果
现在，让我们添加一些JavaScript代码来实现导航菜单的动态效果。以下是一个常用的实现方式：
// 获取导航菜单和菜单按钮元素
const navMenu = document.querySelector('.nav-menu');
const menuBtn = document.querySelector('.menu-btn');
// 点击菜单按钮时切换菜单的可见性
menuBtn.addEventListener('click', () => {
navMenu.classList.toggle('show');
});
// 在窗口大小改变时，当菜单可见时，隐藏菜单
window.addEventListener('resize', () => {
if (window.innerWidth > 768 && navMenu.classList.contains('show')) {
navMenu.classList.remove('show');
}
});
上述代码中，我们首先获取导航菜单容器和菜单按钮的引用。然后，我们为菜单按钮添加一个点击事件监听器，当点击菜单按钮时切换菜单的可见性。
另外，我们还为窗口的大小改变事件添加监听器，当窗口宽度大于768像素且菜单可见时，隐藏菜单。这是因为在较大屏幕上，用户通常希望一直保持菜单的可见性。
结语
通过使用JavaScript，我们可以轻松地开发一个响应式导航菜单。这个菜单可以自动调整样式和行为以适应不同的设备和屏幕尺寸，提供更好的用户体验。
当然，上述代码只是一个简单的示例，你可以根据自己的需求进行定制和扩展。希望本篇博客对你有所帮助，祝你开发愉快！
