js导航栏实现

基础HTML结构

使用<nav>标签包裹导航栏内容，内部通常为无序列表<ul>，每个列表项<li>包含链接<a>。示例代码：

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

CSS样式设计

通过CSS设置导航栏横向排列、悬停效果等。关键属性包括display: flex、list-style: none和伪类:hover：

nav ul {
  display: flex;
  list-style: none;
  gap: 20px;
}
nav a:hover {
  color: #ff5722;
  text-decoration: underline;
}

响应式实现（移动端适配）

使用媒体查询@media调整小屏幕下的布局，常见做法是转换为汉堡菜单：

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    display: none;
  }
  /* 汉堡菜单图标样式 */
  .menu-toggle {
    display: block;
  }
}

JavaScript交互功能

通过DOM操作实现菜单展开/折叠功能。示例使用classList.toggle：

document.querySelector('.menu-toggle').addEventListener('click', () => {
  document.querySelector('nav ul').classList.toggle('active');
});

动态高亮当前页面

通过window.location.pathname检测当前URL，为对应导航项添加active类：

const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
  if(link.href.includes(window.location.pathname)) {
    link.classList.add('active');
  }
});

平滑滚动效果

为页面内锚点链接添加滚动动画：

document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

粘性定位实现

使用CSS的position: sticky让导航栏在滚动时保持可见：

nav {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}