js实现导航栏

实现导航栏的基本结构

使用HTML和CSS创建导航栏的基础结构，HTML负责布局，CSS负责样式。

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

.navbar {
  background-color: #333;
  padding: 10px 0;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.nav-list li {
  margin: 0 15px;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.nav-list a:hover {
  color: #ddd;
}

添加响应式设计

通过JavaScript实现响应式导航栏，在小屏幕上显示汉堡菜单。

const navbarToggle = document.querySelector('.navbar-toggle');
const navList = document.querySelector('.nav-list');

navbarToggle.addEventListener('click', () => {
  navList.classList.toggle('active');
});

<button class="navbar-toggle">☰</button>

@media (max-width: 768px) {
  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .nav-list.active {
    display: flex;
  }

  .navbar-toggle {
    display: block;
  }
}

实现平滑滚动

为导航链接添加平滑滚动效果，提升用户体验。

document.querySelectorAll('.nav-list a').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    targetElement.scrollIntoView({
      behavior: 'smooth'
    });
  });
});

添加固定导航栏

当页面滚动时，导航栏固定在顶部。

window.addEventListener('scroll', () => {
  const navbar = document.querySelector('.navbar');
  if (window.scrollY > 50) {
    navbar.classList.add('fixed');
  } else {
    navbar.classList.remove('fixed');
  }
});

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

高亮当前活动菜单项

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

const sections = document.querySelectorAll('section');
const navItems = document.querySelectorAll('.nav-list li');

window.addEventListener('scroll', () => {
  let current = '';
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - 300) {
      current = section.getAttribute('id');
    }
  });

  navItems.forEach(item => {
    item.classList.remove('active');
    if (item.querySelector('a').getAttribute('href') === `#${current}`) {
      item.classList.add('active');
    }
  });
});

.nav-list li.active a {
  color: #4CAF50;
  font-weight: bold;
}

添加下拉菜单

为导航栏添加下拉菜单功能，适用于多级导航。

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(dropdown => {
  const button = dropdown.querySelector('.dropbtn');
  const content = dropdown.querySelector('.dropdown-content');

  button.addEventListener('click', () => {
    content.classList.toggle('show');
  });
});

window.addEventListener('click', (e) => {
  if (!e.target.matches('.dropbtn')) {
    const dropdowns = document.querySelectorAll('.dropdown-content');
    dropdowns.forEach(dropdown => {
      if (dropdown.classList.contains('show')) {
        dropdown.classList.remove('show');
      }
    });
  }
});

<li class="dropdown">
  <a class="dropbtn">服务</a>
  <div class="dropdown-content">
    <a href="#web">网站开发</a>
    <a href="#mobile">移动应用</a>
    <a href="#design">UI设计</a>
  </div>
</li>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.show {
  display: block;
}