js特效导航代码

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

.navbar {
  background-color: #333;
  overflow: hidden;
}

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

.nav-item {
  position: relative;
}

.nav-item a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: #ddd;
  color: black;
}

/* 添加悬停效果 */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #ffcc00;
  transition: width 0.3s;
}

.nav-item:hover::after {
  width: 100%;
}

// 如果需要更复杂的交互，可以使用JavaScript来添加事件监听器等。
// 例如，以下代码会在点击导航项时打印一条消息：
document.querySelectorAll('.nav-item a').forEach(link => {
  link.addEventListener('click', function(event) {
    event.preventDefault(); // 防止默认跳转行为
    console.log(`Clicked on ${this.textContent}`);
    // 这里可以添加更多自定义逻辑，比如滚动到相应部分等。
  });
});