Fala ai Douglas, tudo bem? Você está querendo saber se tem como fazer um menu igual ao exemplo apenas com CSS? Aquele efeito no hover
dos itens do menu e tals?
Se sim, isso é possível, podemos fazer de N maneiras o menu e as animações.
Para o menu, podemos utilizar Flexbox, já as animações recomendo usar ::before
ou ::after
e transform
com translate
+ opacity
.
Espero ter ajudado.
obrigadooo
Magina Douglas, sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.
Matheus! Primeiro agradeço a resposta...
Porém não consegui passar disso. Vc pode me dizer oq falta no meu código? segue o código
HTML
<nav class="nav__left">
<ul>
<li><a href="#">INÍCIO</a></li>
<li class="sobre"><a href="#">SOBRE NÓS</a></li>
</ul>
</nav>
CSS
.nav__left li::before{
content: "INÍCIO";
bottom: 0em;
color: chartreuse;
position: absolute;
transform-origin: top bottom;
transform: translateY(-100%);
}
.nav__left li:hover{
transform: translateY(100%);
top: 0;
left: 0;
transition: 0.4s;
opacity: 0;
}
Fala ai Douglas, vi que você criou outra dúvida, jaja te respondo lá.
Abraços e bons estudos.