简单的导航栏

在网站开发中，导航栏是一个常见的 UI 元素，它能够为用户提供快速访问网站重要功能的便利。下面将介绍一种实现简单导航栏的方法。

HTML 结构

导航栏通常是一个水平的菜单条，在 HTML 中可以使用 ul 和 li 标签来建立一个无序列表，每个列表项即为一个导航链接。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS 样式

使用 CSS 样式对导航栏进行美化，包括对背景、文字颜色、字体大小、鼠标悬浮等状态的样式设置。

nav {
  background-color: #333;
  color: #fff;
}

nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  display: block;
  padding: 0.5em 1em;
  color: #fff;
  text-decoration: none;
}

nav a:hover {
  background-color: #fff;
  color: #333;
}

JavaScript 交互

为了提升导航栏的交互性体验，可以使用 JavaScript 实现鼠标悬浮时下拉菜单的效果。以下是一种实现方式：

var dropDown = document.getElementsByClassName("dropdown-btn");

for (var i = 0; i < dropDown.length; i++) {
  dropDown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

结语

通过 HTML、CSS 和 JavaScript 的结合，我们可以快速实现一个简单的导航栏，并增加其交互性、美观性和易用性。