🚀#3 JavaScript Project Series.
Tags: javascript, webdev, beginners, tutorial
Published: 2021-09-15 05:55:52

## Hello Coders!👋
Welcome back to the Javascript project series. Today i'm share another amazing project.
### 💟 Save This Series For Upcoming Projects.
![thumbs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwe6tfibcylath1kobw6.gif)
+ **💥 Let's get started....🚀**


## 📜 3. Animated Menu Indicator using JavaScript.
+ In this, we're going to see how you can create an animated Menu Navbar using JavaScript. Navbar is an essential part of any website. It gives the user a functionality to navigate through the website efficiently and easily. It guides the user accordingly so the user will not get lost or loose interest. 

### Here's a preview:-
![view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og9v86aa2thqnxosbiu2.jpg)
###🔸 [CodePen Link For Result](https://codepen.io/codev_land/pen/LYLjrpM)

That being said, let us get started.

+ **Step - 1:-** Like always, create 3 files - Index.html, Style.css and Script.js.

+ **Step - 2:-** Copy the below HTML code and paste it into your code editor.

###Index.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>
```
+ **Step - 3:-** Below is the CSS code for styling.

###Style.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;
}
```

+ **Step - 4:-** Below is the JavaScript code which is the most important part in this Animation. Here, we're creating two constants - **indicator and items**. **``"indicator"``** will store the information of the class **``".nav-indicator"``**, that is the line below. And **``"items"``** will store the information of the class **``".nav-items"``**, that is the menu-items. 
+ Next define function **``handleIndicator``** that's check the which item is clicked by used as per click perform particular task.
+ In this function used **``forEach``** loop is an Array method that executes a custom callback function on each item in an array.
+ Read the code and you will understand how things really works.

###Script.js
```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);
});
```

And that's it. You're done.
### 💟 Save This Series For Upcoming Projects.

🛑 And If you need more content like this follow **@codev_land** on instagram.

### Keep Claim And Just Code It 😎