Hi!
Got stuck on this.
My navigation the structure is:
div - underline - serves as a bottom border for a hover interaction with background color black. Here is a problem:
I want the underline to be static - no hover effect when in Current state of nav-link.
My first solution was just to use the bottom border of nav-link, then this problem is so easy to resolve, in fact, it’s not even a problem, but with this particular hover interaction, I had to use div underline.
Help, please.
hi @kapustiano I had a second look and thing I now understand what you are after. I’m not sure if there is a way to set if condition for current state natively with tools WF offer, but you can do that with a few lines of custom code.
Just delete all animations you have applied even for current as this code do everything for you - underline current and animate hover. I have placed code in site setting to be applicable to any project page.
const [...links] = document.querySelectorAll("a.global-button");
links.forEach((link) => {
let button;
let line;
if (link.classList.contains("w--current")) {
link.querySelector(".global-button__line").style.width = "100%";
return;
} else {
link.addEventListener("mouseover", (e) => {
button = e.target.closest(".global-button");
line = button.querySelector(".global-button__line");
line.animate(
[
// keyframes as many as you would like
{ width: "100%" },
],
{
// timing options
duration: 400,
iterations: 1,
fill: "forwards",
}
);
});
link.addEventListener("mouseout", (e) => {
line.animate(
[
{ width: "0%" },
],
{
// timing options
duration: 400,
iterations: 1,
fill: "forwards",
}
);
});
}
});
