js实现菜单导航

实现基础菜单导航结构

使用HTML和CSS创建菜单的基本结构，再通过JavaScript添加交互功能。HTML部分通常使用<ul>和<li>标签构建层级：

<nav id="mainMenu">
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

CSS部分控制菜单样式和初始状态：

#mainMenu ul {
  list-style: none;
  padding: 0;
}
#mainMenu > ul > li {
  display: inline-block;
  position: relative;
}
.submenu {
  display: none;
  position: absolute;
  background: #fff;
}

添加JavaScript交互逻辑

通过事件监听实现下拉菜单功能。以下示例使用事件委托提高性能：

document.getElementById('mainMenu').addEventListener('mouseover', function(e) {
  if (e.target.tagName === 'LI' && e.target.querySelector('.submenu')) {
    e.target.querySelector('.submenu').style.display = 'block';
  }
});

document.getElementById('mainMenu').addEventListener('mouseout', function(e) {
  if (e.target.tagName === 'LI' && e.target.querySelector('.submenu')) {
    e.target.querySelector('.submenu').style.display = 'none';
  }
});

响应式菜单实现

针对移动设备添加汉堡菜单功能。首先修改CSS添加响应式规则：

@media (max-width: 768px) {
  #mainMenu > ul > li {
    display: block;
  }
  #mainMenu {
    display: none;
  }
  .menuToggle {
    display: block;
  }
}

添加JavaScript控制移动端菜单切换：

document.querySelector('.menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('mainMenu');
  menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
});

高亮当前菜单项

根据当前URL自动高亮对应菜单项：

const currentPath = window.location.pathname;
const menuLinks = document.querySelectorAll('#mainMenu a');

menuLinks.forEach(link => {
  if (link.getAttribute('href') === currentPath) {
    link.classList.add('active');
  }
});

动画效果增强

使用CSS过渡效果平滑显示子菜单：

.submenu {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
}
.submenu.show {
  opacity: 1;
  transform: translateY(0);
}

修改JavaScript控制类名而非直接修改样式：

// 替换原来的display操作
e.target.querySelector('.submenu').classList.add('show');
e.target.querySelector('.submenu').classList.remove('show');