如何使用JavaScript实现一个简单的导航菜单组件

导航菜单是网页中承载页面跳转、功能分区的重要组件，使用原生JavaScript实现可以让我们更深入理解DOM操作和事件处理的底层逻辑，不需要依赖任何第三方UI库，适配大多数基础前端项目的需求。

基础HTML结构搭建

首先我们需要搭建导航菜单的基础HTML结构，包含导航容器和多个菜单项，每个菜单项可以设置对应的跳转链接和显示文本，结构尽量语义化，方便后续样式和逻辑处理。

<nav class="nav-menu">
  <ul class="nav-list">
    <li class="nav-item active" data-index="0">首页</li>
    <li class="nav-item" data-index="1">产品中心</li>
    <li class="nav-item" data-index="2">关于我们</li>
    <li class="nav-item" data-index="3">联系我们</li>
  </ul>
</nav>

基础样式设计

接下来给导航菜单添加基础样式，让菜单呈现横向排列的效果，同时设置默认状态和激活状态的样式区分，这里使用CSS实现，不需要JavaScript参与样式渲染。

.nav-menu {
  width: 100%;
  background-color: #f5f5f5;
  padding: 0 20px;
  box-sizing: border-box;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item:hover {
  color: #1890ff;
}

.nav-item.active {
  color: #1890ff;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background-color: #1890ff;
}

JavaScript交互逻辑实现

核心的交互逻辑是点击菜单项时，切换当前激活的菜单项，让被点击的项添加active类，其他项移除该类，我们可以通过事件委托的方式处理点击事件，提升性能。

// 获取导航容器
const navMenu = document.querySelector('.nav-menu');
// 获取所有菜单项
const navItems = document.querySelectorAll('.nav-item');

// 给导航容器绑定点击事件，使用事件委托处理子项点击
navMenu.addEventListener('click', function(e) {
  // 判断点击的目标是否是菜单项
  if (e.target.classList.contains('nav-item')) {
    // 先移除所有菜单项的active类
    navItems.forEach(item => {
      item.classList.remove('active');
    });
    // 给当前点击的菜单项添加active类
    e.target.classList.add('active');
    // 可以在这里添加跳转逻辑，比如获取data-index做路由处理
    const index = e.target.dataset.index;
    console.log('当前激活的菜单索引是：' + index);
  }
});

功能扩展思路

基础功能实现后，可以根据实际需求扩展更多功能，比如添加子菜单的下拉效果，适配移动端的折叠菜单，或者结合路由库实现页面跳转的同步高亮。如果需要支持动态渲染菜单项，也可以把菜单数据抽成配置项，通过JavaScript动态生成HTML结构，让组件的复用性更强。

动态渲染菜单示例

如果菜单项需要从接口获取或者动态配置，可以使用以下方式生成菜单结构：

// 菜单配置数据
const menuConfig = [
  { text: '首页', index: 0 },
  { text: '产品中心', index: 1 },
  { text: '关于我们', index: 2 },
  { text: '联系我们', index: 3 }
];

// 获取导航列表容器
const navList = document.querySelector('.nav-list');
// 清空原有内容
navList.innerHTML = '';
// 遍历配置生成菜单项
menuConfig.forEach(item => {
  const li = document.createElement('li');
  li.className = 'nav-item';
  // 默认第一个激活
  if (item.index === 0) {
    li.className += ' active';
  }
  li.dataset.index = item.index;
  li.textContent = item.text;
  navList.appendChild(li);
});

注意事项

• 事件委托的父容器要选择稳定的、不会动态销毁的元素，避免事件监听失效
• 如果菜单项有默认跳转链接，可以在点击事件中添加e.preventDefault()阻止默认跳转，再根据需求处理路由
• 样式中的颜色、尺寸可以根据项目的设计规范灵活调整，保持和整体页面风格统一

JavaScript导航菜单组件UI组件前端开发修改时间：2026-06-11 11:33:30