如何使用HTML和CSS实现带有下划线跟随效果的导航栏？

翻滚的胖子
2023-07-26 12:05:22
前端技术
CSS JavaScript

导航栏在网页设计中起着重要的作用，它能够帮助用户快速导航到所需的页面。本文将介绍如何使用HTML和CSS实现带有下划线跟随效果的导航栏，通过详细讲解函数和函数细节用法参数以及附带的代码案例，帮助编程小白轻松学习。

一、HTML结构

首先，我们需要先搭建导航栏的HTML结构。在<body>标签中，创建<ul>标签，并在其中添加<li>标签作为导航项。每个导航项中，都需要设置一个<a>标签，用于跳转到对应的页面。

<ul>
  <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>

二、CSS样式

接下来，我们需要为导航栏添加CSS样式，包括设置字体、颜色、背景等。此外，我们还需要使用伪类选择器来实现下划线跟随效果。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover {
  background-color: #111;
}
 
li a.active {
  background-color: #4CAF50;
}
 
/* 下划线跟随效果 */
ul li a.active {
  position: relative;
}
 
ul li a.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4CAF50;
}

三、JavaScript代码

为了实现下划线跟随效果，我们需要使用JavaScript来动态修改导航项的样式。具体来说，我们需要为每个导航项添加一个事件监听器，在鼠标移入时改变样式。

var navItems = document.querySelectorAll('ul li a');
 
for (var i = 0; i < navItems.length; i++) {
  navItems[i].addEventListener('mouseenter', function() {
    var activeItem = document.querySelector('ul li a.active');
    if (activeItem) {
      activeItem.classList.remove('active');
    }
    this.classList.add('active');
  });
}