js实现菜单导航

实现菜单导航的JavaScript方法

创建HTML结构

<nav id="mainMenu">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

添加CSS样式

#mainMenu {
  background-color: #333;
}

#mainMenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

#mainMenu li {
  padding: 15px;
}

#mainMenu a {
  color: white;
  text-decoration: none;
}

#mainMenu a:hover {
  color: #4CAF50;
}

基本JavaScript功能实现

document.querySelectorAll('#mainMenu a').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    document.querySelector(targetId).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

响应式菜单实现

const menuToggle = document.createElement('button');
menuToggle.textContent = '菜单';
menuToggle.id = 'menuToggle';
document.body.prepend(menuToggle);

const mainMenu = document.getElementById('mainMenu');

menuToggle.addEventListener('click', function() {
  mainMenu.classList.toggle('active');
});

// 添加媒体查询监听
const mediaQuery = window.matchMedia('(min-width: 768px)');
function handleTabletChange(e) {
  if (e.matches) {
    mainMenu.classList.remove('active');
  }
}
mediaQuery.addListener(handleTabletChange);

添加CSS过渡效果

#mainMenu {
  transition: all 0.3s ease;
}

@media (max-width: 767px) {
  #mainMenu {
    max-height: 0;
    overflow: hidden;
  }

  #mainMenu.active {
    max-height: 500px;
  }
}

当前选中菜单项高亮

window.addEventListener('scroll', function() {
  const sections = document.querySelectorAll('section');
  const navLinks = document.querySelectorAll('#mainMenu a');

  sections.forEach(section => {
    const top = window.scrollY;
    const offset = section.offsetTop - 100;
    const height = section.offsetHeight;
    const id = section.getAttribute('id');

    if (top >= offset && top < offset + height) {
      navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${id}`) {
          link.classList.add('active');
        }
      });
    }
  });
});

添加CSS高亮样式

#mainMenu a.active {
  color: #4CAF50;
  font-weight: bold;
}

这些代码组合实现了一个完整的菜单导航系统，包含基本功能、响应式设计和视觉反馈效果。可以根据实际需求进行调整和扩展。