DEV Community

Cover image for 🚀#3 JavaScript Project Series.
Chetan Atrawalkar
Chetan Atrawalkar

Posted on • Updated on

🚀#3 JavaScript Project Series.

Hello Coders!👋

Welcome back to the Javascript project series. Today i'm share another amazing project.

💟 Save This Series For Upcoming Projects.

thumbs

  • 💥 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

🔸 CodePen Link For Result

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

<!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>
Enter fullscreen mode Exit fullscreen mode
  • Step - 3:- Below is the CSS code for styling.

Style.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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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

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);
});
Enter fullscreen mode Exit fullscreen mode

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 😎

Top comments (0)

The discussion has been locked. New comments can't be added.