初探导航栏构建——HTML、CSS、JavaScript协奏曲

2023-09-05 03:57:00

导航栏构建：HTML序曲

我们从HTML开始搭建导航栏的基础框架。

<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="services.html">服务</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</nav>

在这个HTML框架中，<nav>元素是导航栏的容器，<ul>元素是无序列表，<li>元素是列表项，<a>元素是链接。这样，我们便创建了一个基本的导航栏，但它还没有样式。

CSS：点缀导航栏的华彩乐章

接下来，让我们用CSS为导航栏增添视觉魅力。

nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
  margin: 0;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

nav li {
  padding: 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

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

这些CSS样式设置了导航栏的背景颜色、字体颜色、边距和填充。它还将导航栏中的链接设置为无样式，并使它们在悬停时改变颜色和背景颜色。

JavaScript：赋予导航栏灵动生命

最后，我们用JavaScript为导航栏添加一些交互性。

const navLinks = document.querySelectorAll('nav a');

navLinks.forEach(link => {
  link.addEventListener('click', (event) => {
    event.preventDefault();

    const target = event.target.getAttribute('href');

    window.location.href = target;
  });
});

这段JavaScript代码为导航栏中的每个链接添加了一个事件监听器，当用户点击链接时，它将防止默认行为（页面刷新）并加载链接指向的页面。

面包屑菜单：导航栏的贴心向导

现在，我们来构建面包屑菜单，为用户提供清晰的网站位置信息。

<div id="breadcrumb">
  <a href="index.html">首页</a>
  <span> > </span>
  <a href="about.html">关于我们</a>
</div>

这个HTML代码创建了一个<div>元素作为面包屑菜单的容器，并在其中添加了指向首页和关于我们的链接。

#breadcrumb {
  background-color: #eee;
  padding: 10px;
  margin: 0;
}

#breadcrumb a {
  color: #333;
  text-decoration: none;
}

#breadcrumb span {
  color: #666;
}