js实现导航

2026-03-15 09:58:08JavaScript

实现基本导航结构

使用HTML和JavaScript创建基础的导航菜单结构。HTML部分定义导航栏的容器和链接，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>

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

响应式导航实现

为移动设备创建可折叠的汉堡菜单。通过CSS媒体查询和JavaScript切换类名实现响应式效果。

js实现导航

@media (max-width: 768px) {
  #mainNav ul {
    display: none;
  }
  #mainNav.active ul {
    display: block;
  }
  .hamburger {
    display: block;
  }
}

const nav = document.getElementById('mainNav');
const hamburger = document.createElement('div');
hamburger.className = 'hamburger';
hamburger.innerHTML = '☰';
nav.prepend(hamburger);

hamburger.addEventListener('click', () => {
  nav.classList.toggle('active');
});

高亮当前活动导航项

根据滚动位置自动高亮显示对应的导航菜单项，增强用户体验。

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

  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');
    }
  });
});

动态加载导航内容

通过AJAX或Fetch API动态加载导航内容，适合内容管理系统或大型网站。

js实现导航

fetch('/api/navigation')
  .then(response => response.json())
  .then(data => {
    const nav = document.getElementById('mainNav');
    const ul = document.createElement('ul');

    data.items.forEach(item => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.href = item.url;
      a.textContent = item.title;
      li.appendChild(a);
      ul.appendChild(li);
    });

    nav.appendChild(ul);
  });

添加过渡动画效果

为导航菜单添加CSS过渡效果，使交互更加平滑。

#mainNav ul {
  transition: all 0.3s ease-out;
}
#mainNav a {
  transition: color 0.2s, background-color 0.2s;
}

无障碍优化

确保导航菜单对屏幕阅读器等辅助技术友好，符合WCAG标准。

<nav aria-label="Main navigation">
  <button aria-expanded="false" aria-controls="navList">Menu</button>
  <ul id="navList" hidden>
    <!-- 导航项 -->
  </ul>
</nav>

const menuButton = document.querySelector('[aria-controls="navList"]');
menuButton.addEventListener('click', () => {
  const expanded = menuButton.getAttribute('aria-expanded') === 'true';
  menuButton.setAttribute('aria-expanded', !expanded);
  document.getElementById('navList').hidden = expanded;
});

标签: js