You will learn how to create an animated navbar menu using JavaScript, HTML & CSS in this blog post.

Throughout your website, visitors will find links to the most important pages via the menu bar. Tabs enable you to display different topics on a single web page easily or to display different content in a small space. You will learn how to create an animated navbar menu using JavaScript, HTML & CSS today.

On the webpage of this program, there is a menu bar with three different options. On the other hand, when you mouse over the specific menu, an Elastic Tab Animation appears with a gradient background color. It is very common to see this type of animation somewhere, there may be a use of only HTML & CSS, but this was created using JavaScript or JavaScript library, which means I used HTML, CSS, &  JavaScript.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Animated Navbar Menu using JavaScript).

Video Tutorial of an Animated Navbar Menu using JavaScript

In the video how to create an animated navbar menu using JavaScrip, HTML, and CSS. Also, I trust you've perceived the fundamental codes behind making this movement. This is a straightforward JavaScript, HTML, and CSS program so if you're a novice in web planning and you know essential HTML and CSS then you can undoubtedly comprehend the codes of the program.

Assuming you like this program (energized navbar menu utilizing JavaScrip) and need to get source codes. You can undoubtedly get the source codes of this program. To get the source codes you simply need to look down. You can utilize this program on your tasks and the site's menu bar.

Animated Navbar Menu [Source Codes]

To create this program (Elastic Tab Animation). First, you need to create three Files one HTML File, one CSS File and another is JavaScript File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

    <nav class="menu-bar">
      <a href="#" >Home</a>
      <a href="#">Services</a>
      <a href="#">About</a>
      <div class="menu-bg"></div>
    </nav>



    <script src="main.js"></script>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension. 


body{
  background: #181818;
}
nav.menu-bar {
  width: 590px;
  height: 60px;
  padding: 8px 32px;
  margin: 270px auto 0;
  border-radius: 10px;
  text-align: center;
  background: #101010;
  box-shadow: 16px 14px 20px #0000008c;
 border-color: #ff0052;
 border-style: groove;
}
nav.menu-bar a {
  text-decoration: none;
  margin: 6px 16px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  padding: 8px 20px;
  display: inline-block;
  position: relative;
  z-index: 2;
  transition: all 600ms cubic-bezier(0.84, 0.07, 0.26, 1.4);
}
nav.menu-bar .menu-bg {
  position: absolute;
  background: #fff;
  opacity: 0;
  border-radius: 20px;
  transition: all 600ms cubic-bezier(0.84, 0.07, 0.26, 1.4);
  border-color: #24ecff;
  box-shadow: 0 0 0 5px #24ecff33,
  0 0 0 9px #24ecff22,
  0 0 12px #24ecff11;
  border-style: groove;
}

Thread, create a JavaScript file with the name of main.js , and paste the given codes in your JavaScript file. Remember, you’ve to create a file with a .js extension. 


const menuItems = document.querySelectorAll("nav.menu-bar a");
const menuBg = document.querySelector("nav.menu-bar .menu-bg");

menuItems.forEach((i) => {
  i.addEventListener("mouseover", () => {
    let element = i.getBoundingClientRect();

    menuBg.style.left = element.x + "px";
    menuBg.style.top = element.y + "px";
    menuBg.style.width = element.width + "px";
    menuBg.style.height = element.height + "px";

    i.style.color = "#000";
    menuBg.style.opacity = 1;
  });

  i.addEventListener("mouseout", () => {
    i.style.color = "#fff";
    menuBg.style.opacity = 0;
  });
});

Source Codes

Download file