js实现菜单导航

2026-02-28 23:24:31JavaScript

实现基础菜单导航结构

使用HTML和CSS创建基本的菜单结构，配合JavaScript实现交互功能。以下是一个简单的垂直菜单导航示例：

<nav id="mainMenu">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#products">产品</a>
      <ul class="submenu">
        <li><a href="#product1">产品1</a></li>
        <li><a href="#product2">产品2</a></li>
      </ul>
    </li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

#mainMenu ul {
  list-style: none;
  padding: 0;
}
#mainMenu li {
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
.submenu.active {
  display: block;
}

添加JavaScript交互逻辑

通过事件监听实现菜单的显示/隐藏功能：

js实现菜单导航

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('#mainMenu > ul > li');

  menuItems.forEach(item => {
    if(item.querySelector('.submenu')) {
      item.addEventListener('mouseenter', function() {
        this.querySelector('.submenu').classList.add('active');
      });
      item.addEventListener('mouseleave', function() {
        this.querySelector('.submenu').classList.remove('active');
      });
    }
  });
});

响应式菜单实现

针对移动设备添加汉堡菜单功能：

<button id="mobileMenuBtn">☰</button>
<nav id="mobileMenu">
  <!-- 菜单内容与桌面版相同 -->
</nav>

#mobileMenuBtn {
  display: none;
}
@media (max-width: 768px) {
  #mobileMenuBtn {
    display: block;
  }
  #mobileMenu {
    display: none;
  }
  #mobileMenu.active {
    display: block;
  }
}

const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');

mobileMenuBtn.addEventListener('click', function() {
  mobileMenu.classList.toggle('active');
});

使用classList管理菜单状态

现代JavaScript推荐使用classList API来管理元素的类：

js实现菜单导航

// 添加类
element.classList.add('active');

// 移除类
element.classList.remove('active');

// 切换类
element.classList.toggle('active');

// 检查是否包含类
if(element.classList.contains('active')) {
  // 执行操作
}

增强用户体验的功能

添加键盘导航支持和ARIA属性提升可访问性：

menuItems.forEach((item, index) => {
  item.setAttribute('tabindex', '0');
  item.addEventListener('keydown', function(e) {
    if(e.key === 'Enter' || e.key === ' ') {
      const submenu = this.querySelector('.submenu');
      if(submenu) {
        submenu.classList.toggle('active');
      }
    }

    // 方向键导航
    if(e.key === 'ArrowDown') {
      const nextItem = menuItems[index + 1];
      if(nextItem) nextItem.focus();
    }
    if(e.key === 'ArrowUp') {
      const prevItem = menuItems[index - 1];
      if(prevItem) prevItem.focus();
    }
  });
});

使用事件委托优化性能

对于大型菜单，使用事件委托可以减少事件监听器数量：

document.getElementById('mainMenu').addEventListener('click', function(e) {
  if(e.target.closest('li').querySelector('.submenu')) {
    e.preventDefault();
    e.target.closest('li').querySelector('.submenu').classList.toggle('active');
  }
});

这些方法提供了从基础到进阶的菜单导航实现方案，可以根据具体需求进行组合和调整。