Crie um menu de navegação com um indicador ativo animado (JavaScript)Reviltec

Em um tutorial anterior, discutimos como construir um deslocando o efeito de foco do sublinhado. Hoje, aprenderemos como criar outro efeito sofisticado de menu: cada vez que clicarmos ou passarmos o mouse sobre um item (a escolha é sua!) haverá um elemento mágico em movimento que acompanhará o item ativo.

Durante esta jornada, também abordaremos uma técnica útil para atualizar os estilos de pseudoelementos CSS por meio do JavaScript com a ajuda das variáveis CSS.

1. Comece com a marcação HTML

Para desenvolver este componente, vamos definir um nav elemento que conterá o menu agrupado dentro de um container. Por padrão, daremos a active class ao primeiro item da lista, mas podemos igualmente atribuir esta classe a qualquer um deles.

Aqui está a estrutura necessária:

 class="container">
  
     class="menu">
       class="active">
         href="">Home
      
      
         href="">Information About Us
      
      
         href="">Clients
      
      
         href="">Contact
      
    
  


“Informações sobre nós” é um rótulo estranho para um item de menu, mas demonstra a mudança de largura do efeito.

2. Adicione o CSS

Felizmente, só precisaremos de alguns estilos.

Como dissemos, o menu ficará dentro de um container com largura máxima de 1000px.

Para criar o elemento com o fundo em movimento que atuará como um indicador de menu ativo, não usaremos nenhum elemento HTML extra. Em vez disso, definiremos o ::before pseudo-elemento do menu e, em seguida, atualize seu transform e width valores dinamicamente por meio de JavaScript.

Em telas menores que 801px, ocultaremos o marcador em movimento e usaremos apenas alguns estilos semelhantes para indicar o item de menu ativo.

Aqui estão os estilos de menu que mais nos interessam:

/*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. Aplique o JavaScript

Agora a parte interessante.

vamos especificar o doCalculations() função que receberá como parâmetro o item ativo e fará estas coisas:

Calcule sua largura e deslocamento à esquerda em relação à lista pai.
Atualize de acordo com o transformJS e widthJS Variáveis CSS que, por sua vez, definirão o transform e width valores do cardápio ::before pseudo-elemento.

Esta função será executada nos seguintes casos:

Quando o DOM estiver pronto. Nesse caso, o item ativo será aquele com o active aula. Por padrão, este será o primeiro.
Cada vez que clicamos ou passamos o mouse sobre um link de menu.
À medida que redimensionamos a janela do navegador. Isso é importante porque lembre-se de que em telas menores seguimos uma abordagem diferente.

Aqui está o código JavaScript necessário para a animação ao clicar:

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);
});

Para a animação ao passar o mouse, substituiremos o click evento com o mouseenter um assim:

...

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

Conclusão

Feito! De forma rápida, conseguimos desenvolver uma animação de menu de navegação prática que pode ocorrer tanto ao clicar quanto ao passar o mouse. Uma implementação mais avançada dele coloca menus suspensos em jogo e cria uma navegação de acompanhamento como no site do Stripe.

Além da animação em si, outra coisa a ter em mente é a forma como usamos variáveis CSS para atualizar os estilos de pseudo-elementos. Esta é uma ótima fonte de conhecimento nos casos em que você tem dores de cabeça ao manipular pseudo-elementos por meio do JavaScript.

Mais uma vez, vamos relembrar nossas demos.

A primeira demonstração:

<br />

E o segundo:

<br />

Como sempre, muito obrigado pela leitura!

Relacionado

Posted by admin

Tagged with