当前位置：首页 > JavaScript

js实现导航

2026-02-02 09:58:33JavaScript

实现基础导航栏

使用HTML和CSS创建导航栏结构，通过JavaScript添加交互功能。HTML部分定义导航栏的基本框架，CSS负责样式设计，JavaScript处理动态效果。

<nav id="mainNav">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

#mainNav {
  background-color: #333;
  padding: 1rem;
}

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

#mainNav li {
  margin-right: 1rem;
}

#mainNav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

#mainNav a:hover {
  background-color: #555;
}

添加响应式菜单

对于移动设备，需要实现汉堡菜单功能。通过JavaScript监听窗口大小变化，调整导航栏显示方式。

const nav = document.getElementById('mainNav');
const menuButton = document.createElement('button');
menuButton.innerHTML = '☰';
menuButton.classList.add('menu-toggle');
nav.prepend(menuButton);

function toggleMenu() {
  const ul = nav.querySelector('ul');
  ul.style.display = ul.style.display === 'none' ? 'flex' : 'none';
}

menuButton.addEventListener('click', toggleMenu);

function checkScreenSize() {
  const ul = nav.querySelector('ul');
  if (window.innerWidth > 768) {
    ul.style.display = 'flex';
  } else {
    ul.style.display = 'none';
  }
}

window.addEventListener('resize', checkScreenSize);
checkScreenSize();

实现平滑滚动

为页面内的锚点链接添加平滑滚动效果，提升用户体验。

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    window.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth'
    });
  });
});

添加活动菜单项高亮

根据当前滚动位置自动高亮对应的导航菜单项。

const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('#mainNav a');

window.addEventListener('scroll', () => {
  let current = '';

  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
      current = section.getAttribute('id');
    }
  });

  navLinks.forEach(link => {
    link.classList.remove('active');
    if (link.getAttribute('href') === `#${current}`) {
      link.classList.add('active');
    }
  });
});

实现下拉菜单

为具有子菜单的导航项添加下拉功能。

const hasSubmenu = document.querySelectorAll('#mainNav li.has-submenu');

hasSubmenu.forEach(item => {
  const submenu = item.querySelector('ul');
  submenu.style.display = 'none';

  item.addEventListener('mouseenter', () => {
    submenu.style.display = 'block';
  });

  item.addEventListener('mouseleave', () => {
    submenu.style.display = 'none';
  });
});

添加CSS过渡效果

通过CSS增强导航栏的视觉体验。

#mainNav a {
  transition: background-color 0.3s ease;
}

#mainNav ul ul {
  position: absolute;
  background-color: #444;
  min-width: 200px;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

#mainNav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

js实现导航