In a earlier tutorial, we mentioned learn how to construct a shifting underline hover impact. Right now, we’ll discover ways to create one other fancy menu impact: every time we click on on, or hover over an merchandise (the selection is yours!) there can be a magic transferring component that may comply with together with the lively merchandise.
Throughout this journey, we’ll additionally cowl a helpful method to replace CSS pseudo-elements kinds by means of JavaScript with the assistance of the CSS variables.
1. Start With the HTML Markup
To develop this part, we’ll outline a nav component that may comprise the menu wrapped inside a container. By default, we’ll give the lively class to the primary checklist merchandise, however we are able to equally assign this class to any of them.
Right here’s the required construction:
1 |
<div class="container"> |
2 |
<nav>
|
3 |
<ul class="menu"> |
4 |
<li class="lively"> |
5 |
<a href="">House</a> |
6 |
</li>
|
7 |
<li>
|
8 |
<a href="">Data About Us</a> |
9 |
</li>
|
10 |
<li>
|
11 |
<a href="">Purchasers</a> |
12 |
</li>
|
13 |
<li>
|
14 |
<a href="">Contact</a> |
15 |
</li>
|
16 |
</ul>
|
17 |
</nav>
|
18 |
</div>
|
“Data About Us” is a bizarre label for a menu merchandise, but it surely demonstrates the altering width of the impact.
2. Add the CSS
Fortunately sufficient, we’ll solely want just a few kinds.
As we stated, the menu will reside inside a container with a most width of 1000px.
To create the component with the transferring background that may act as an lively menu indicator, we received’t use any additional HTML components. As a substitute, we’ll outline the ::earlier than pseudo-element of the menu after which replace its rework and width values dynamically by means of JavaScript.
On screens smaller than 801px, we’ll cover the transferring highlighter and simply use some comparable kinds to point the lively menu merchandise.
Listed here are the menu kinds that primarily curiosity us:
1 |
/*CUSTOM VATIABLES HERE*/
|
2 |
|
3 |
.menu { |
4 |
list-style: none; |
5 |
place: relative; |
6 |
show: inline-flex; |
7 |
background: var(--pink); |
8 |
padding: 10px; |
9 |
border-radius: 15px; |
10 |
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; |
11 |
}
|
12 |
|
13 |
.menu::earlier than { |
14 |
content material: ""; |
15 |
place: absolute; |
16 |
prime: 10px; |
17 |
left: 0; |
18 |
rework: translateX(var(--transformJS)); |
19 |
width: var(--widthJS); |
20 |
peak: calc(100% - 20px); |
21 |
border-radius: var(--active-link-border-radius); |
22 |
background: var(--light-pink); |
23 |
box-shadow: var(--active-link-box-shadow); |
24 |
transition: all 0.3s linear; |
25 |
}
|
26 |
|
27 |
.menu li a { |
28 |
show: inline-block; |
29 |
place: relative; |
30 |
padding: 10px 20px; |
31 |
font-size: 20px; |
32 |
font-weight: 500; |
33 |
z-index: 1; |
34 |
}
|
35 |
|
36 |
.menu li:not(:last-child) { |
37 |
margin-right: 20px; |
38 |
}
|
39 |
|
40 |
@media (max-width: 800px) { |
41 |
.menu, |
42 |
.menu li { |
43 |
show: inline-block; |
44 |
}
|
45 |
|
46 |
.menu li.lively a { |
47 |
background: var(--light-pink); |
48 |
border-radius: var(--active-link-border-radius); |
49 |
box-shadow: var(--active-link-box-shadow); |
50 |
}
|
51 |
|
52 |
.menu::earlier than { |
53 |
show: none; |
54 |
}
|
55 |
}
|
3. Apply the JavaScript
Now for the fascinating half.
We’ll specify the doCalculations() perform that may get as a parameter the lively merchandise and do this stuff:
- Calculate its width and offset left place relative to the father or mother checklist.
- Replace accordingly the
transformJSandwidthJSCSS variables that may of their flip set thereworkandwidthvalues of the menu’s::earlier thanpseudo-element.
This perform will run within the following circumstances:
- When the DOM is prepared. In such a case, the lively merchandise would be the one with the
livelyclass. By default, this would be the first one. - Every time we click on on or hover over a menu hyperlink.
- As we resize the browser window. That is essential as a result of keep in mind that on smaller screens we comply with a distinct method.
Right here’s the required JavaScript code for the on click on animation:
1 |
const menu = doc.querySelector(".menu"); |
2 |
const menuLinks = menu.querySelectorAll("a"); |
3 |
const menuLinkActive = menu.querySelector("li.lively"); |
4 |
const activeClass = "lively"; |
5 |
|
6 |
doCalculations(menuLinkActive); |
7 |
|
8 |
for (const menuLink of menuLinks) { |
9 |
menuLink.addEventListener("click on", perform (e) { |
10 |
e.preventDefault(); |
11 |
menu.querySelector("li.lively").classList.take away(activeClass); |
12 |
menuLink.parentElement.classList.add(activeClass); |
13 |
doCalculations(menuLink); |
14 |
});
|
15 |
}
|
16 |
|
17 |
perform doCalculations(hyperlink) { |
18 |
menu.fashion.setProperty("--transformJS", `${hyperlink.offsetLeft}px`); |
19 |
menu.fashion.setProperty("--widthJS", `${hyperlink.offsetWidth}px`); |
20 |
}
|
21 |
|
22 |
window.addEventListener("resize", perform() { |
23 |
const menuLinkActive = menu.querySelector("li.lively"); |
24 |
doCalculations(menuLinkActive); |
25 |
});
|
For the on hover animation, we’ll substitute the click on occasion with the mouseenter one like this:
1 |
...
|
2 |
|
3 |
menuLink.addEventListener("mouseenter", perform () { |
4 |
doc.querySelector(".menu li.lively").classList.take away(activeClass); |
5 |
menuLink.parentElement.classList.add(activeClass); |
6 |
doCalculations(menuLink); |
7 |
});
|
Conclusion
Performed! As shortly as this, we managed to develop a sensible navigation menu animation that may happen both on click on or hover. A extra superior implementation of it places dropdowns into play and builds follow-along navigation like on Stripe’s web site.
Aside from the animation itself, one other factor to remember is the best way we used CSS variables to replace the pseudo-elements kinds. This can be a nice supply of data in circumstances you’ve complications from manipulating pseudo-elements by means of JavaScript.
As soon as once more, let’s recall our demos.
The primary demo:
And the second:
As at all times, thanks lots for studying!
