🚀#3 JavaScript 项目系列。

你好，程序员们！👋

欢迎回到 Javascript 项目系列。今天我要分享另一个精彩的项目。

💟 保存此系列以供即将进行的项目使用。

💥 让我们开始吧....🚀

📜 3. 使用 JavaScript 的动画菜单指示器。

在本教程中，我们将学习如何使用 JavaScript 创建动画菜单导航栏。导航栏是任何网站的重要组成部分。它为用户提供高效便捷的网站导航功能。它能够引导用户进行相应的操作，避免用户迷失或失去兴趣。

以下是预览：-

🔸 CodePen 结果链接

话虽如此，让我们开始吧。

步骤 - 1：-像往常一样，创建 3 个文件 - Index.html、Style.css 和 Script.js。
步骤 - 2：复制以下 HTML 代码并将其粘贴到您的代码编辑器中。

索引.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated menu indicator</title>
<link rel="stylesheet" href="style.css">

</head>
<body>

<nav class="nav">
  <a href="#" class="nav-item is-active" active-color="orange">Home</a>
  <a href="#" class="nav-item" active-color="green">About</a>
  <a href="#" class="nav-item" active-color="blue">Project</a>
  <a href="#" class="nav-item" active-color="red">Blog</a>
  <a href="#" class="nav-item" active-color="rebeccapurple">Contact</a>
  <span class="nav-indicator"></span>
</nav>

<script  src="script.js"></script>

</body>
</html>

步骤 - 3：-下面是用于样式的 CSS 代码。

样式.css

@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
* {
  box-sizing: border-box;
}
body {
  text-align: center;
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background-color: #f6f7fc;
}
.nav {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(159, 162, 177, 0.6);
}
.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: 0.3s;
  margin: 0 6px;
  z-index: 1;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: 0.3s;
}
.nav-item:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}
.nav-item:not(.is-active):hover {
  color: #333;
}
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: 0.4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

步骤 4：下面是 JavaScript 代码，它是此动画中最重要的部分。在这里，我们创建了两个常量 - indicator 和 items。indicator和 items"indicator"将存储类的信息".nav-indicator"，即下面一行。items"items"将存储类的信息".nav-items"，即菜单项。
接下来定义函数handleIndicator来检查哪个项目被点击，并根据点击执行特定的任务。
在此函数中使用的forEach循环是一个数组方法，它对数组中的每个项目执行自定义回调函数。
阅读代码你就会明白事情是如何运作的。

Script.js

const indicator = document.querySelector('.nav-indicator');
const items = document.querySelectorAll('.nav-item');

function handleIndicator(el) {
  items.forEach(item => {
    item.classList.remove('is-active');
    item.removeAttribute('style');
  });

  indicator.style.width = `${el.offsetWidth}px`;
  indicator.style.left = `${el.offsetLeft}px`;
  indicator.style.backgroundColor = el.getAttribute('active-color');

  el.classList.add('is-active');
  el.style.color = el.getAttribute('active-color');
}


items.forEach((item, index) => {
  item.addEventListener('click', e => {handleIndicator(e.target);});
  item.classList.contains('is-active') && handleIndicator(item);
});

就这样，你完成了。

💟 保存此系列以供即将进行的项目使用。

🛑 如果您需要更多类似的内容，请在 Instagram 上关注@codev_land。

保留声明并进行编码😎

文章来源：https://dev.to/chetan_atrawalkar/3-javascript-project-series-3gfj