Build a Navigation Menu With an Animated Active Indicator (JavaScript)

In a previous tutorial, we discussed how to build a shifting underline hover effect. Today, we’ll learn how to create another fancy menu effect: each time we click on, or hover over an item (the choice is yours!) there will be a magic moving element that will follow along with the active item.

During this journey, we'll also cover a useful technique to update CSS pseudo-elements styles through JavaScript with the help of the CSS variables.

Take a look at the first demo where the animation will happen on click:

Then the second one where the animation will happen on hover:

1. Begin With the HTML Markup

To develop this component, we’ll define a nav element that will contain the menu wrapped inside a container. By default, we’ll give the active class to the first list item, but we can equally assign this class to any of them.

Here’s the required structure:

1	<div class="container">
2	<nav>
3	<ul class="menu">
4	<li class="active">
5	<a href="">Home</a>
6	</li>
7	<li>
8	<a href="">Information About Us</a>
9	</li>
10	<li>
11	<a href="">Clients</a>
12	</li>
13	<li>
14	<a href="">Contact</a>
15	</li>
16	</ul>
17	</nav>
18	</div>

“Information About Us” is a weird label for a menu item, but it demonstrates the changing width of the effect.

2. Add the CSS

Happily enough, we’ll only need a few styles.

As we said, the menu will live inside a container with a maximum width of 1000px.

To create the element with the moving background that will act as an active menu indicator, we won’t use any extra HTML elements. Instead, we’ll define the ::before pseudo-element of the menu and then update its transform and width values dynamically through JavaScript.

On screens smaller than 801px, we’ll hide the moving highlighter and just use some similar styles to indicate the active menu item.

Here are the menu styles that mainly interest us:

/*CUSTOM VATIABLES HERE*/

.menu {
  list-style: none;
  position: relative;
  display: inline-flex;
  background: var(--pink);
  padding: 10px;
  border-radius: 15px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.menu::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  transform: translateX(var(--transformJS));
  width: var(--widthJS);
  height: calc(100% - 20px);
  border-radius: var(--active-link-border-radius);
  background: var(--light-pink);
  box-shadow: var(--active-link-box-shadow);
  transition: all 0.3s linear;
}

.menu li a {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  z-index: 1;
}

.menu li:not(:last-child) {
  margin-right: 20px;
}

@media (max-width: 800px) {
  .menu,
  .menu li {
    display: inline-block;
  }

  .menu li.active a {
    background: var(--light-pink);
    border-radius: var(--active-link-border-radius);
    box-shadow: var(--active-link-box-shadow);
  }

  .menu::before {
    display: none;
  }
}

3. Apply the JavaScript

Now for the interesting part.

We’ll specify the doCalculations() function that will get as a parameter the active item and do these things:

Calculate its width and offset left position relative to the parent list.
Update accordingly the transformJS and widthJS CSS variables that will in their turn set the transform and width values of the menu’s ::before pseudo-element.

This function will run in the following cases:

When the DOM is ready. In such a case, the active item will be the one with the active class. By default, this will be the first one.
Each time we click on or hover over a menu link.
As we resize the browser window. This is important because remember that on smaller screens we follow a different approach.

Here’s the required JavaScript code for the on click animation:

const menu = document.querySelector(".menu");
const menuLinks = menu.querySelectorAll("a");
const menuLinkActive = menu.querySelector("li.active");
const activeClass = "active";

doCalculations(menuLinkActive);

for (const menuLink of menuLinks) {
  menuLink.addEventListener("click", function (e) {
    e.preventDefault();
    menu.querySelector("li.active").classList.remove(activeClass);
    menuLink.parentElement.classList.add(activeClass);
    doCalculations(menuLink);
  });
}

function doCalculations(link) {
  menu.style.setProperty("--transformJS", `${link.offsetLeft}px`);
  menu.style.setProperty("--widthJS", `${link.offsetWidth}px`);
}

window.addEventListener("resize", function() {
  const menuLinkActive = menu.querySelector("li.active");
  doCalculations(menuLinkActive);
});

For the on hover animation, we’ll replace the click event with the mouseenter one like this:

...

menuLink.addEventListener("mouseenter", function () {
  document.querySelector(".menu li.active").classList.remove(activeClass);
  menuLink.parentElement.classList.add(activeClass);
  doCalculations(menuLink);
});

Conclusion

Done! As quickly as this, we managed to develop a practical navigation menu animation that can occur either on click or hover. A more advanced implementation of it puts dropdowns into play and builds follow-along navigation like on Stripe’s website.

Apart from the animation itself, another thing to keep in mind is the way we used CSS variables to update the pseudo-elements styles. This is a great source of knowledge in cases you have headaches from manipulating pseudo-elements through JavaScript.

Once again, let’s recall our demos.

The first demo:

And the second one:

As always, thanks a lot for reading!