Como colocar uma barra de menu e fazer elas se movimentar quando eu clicar? igual nesse site! https://fortunatobar.com.br/
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como colocar uma barra de menu e fazer elas se movimentar quando eu clicar? igual nesse site! https://fortunatobar.com.br/
Explicar por aqui é meio complicado, mas tem diversos tutoriais falando a respeito disso, inclusive aqui na Alura.
Recomendo este vídeo: https://www.youtube.com/watch?v=2WKH-eRJ2O0
você pode me mostrar o do alura?
e tambem eu queria fazer a animação que nesse tutorial que você mandou não explica!
Oi Geovane, qual das movimentações você se refere? eu dei uma olhada no site e fiquei confuso sobre qual animação você gostaria de fazer.
Tem 3 linhas no menu eu queria saber como fazer efeito de movimento nelas igual nesse site que enviei!
Ah, o menu hamburger da lateral. vejamos, tem várias formas de fazer, vamos a uma delas: você pode fazer três barras com spans e preencher elas com a cor desejada.
HTML:
<div>
<span class="barrinha-menu"></span>
<span class="barrinha-menu"></span>
<span class="barrinha-menu"></span>
</div>CSS das Barrinhas:
.barrinha-menu {
height: 4px;
width: 50px;
background-color: #000;
display: block;
margin: 4px;
transition: width 2s ease, margin-left 2s ease;
}Aqui o transition vai fazer duas coisas para a gente:
A parte que faz tudo acontecer está aqui:
div:hover .barrinha-menu:nth-child(2) {
margin-left: 15px;
}
div:hover .barrinha-menu {
width: 35px;
transition: width 2s ease, margin-left 2s ease;
}Primeiro peganos a barrinha do meio e afastamos ela pro lado. Depois fazemos com que todas as barrinhas fiquem menores e aplicamos novamente a transição.
Veja que de um lado a transição serve para que elas diminuam de tamanho lentamente e se posicionem corretamente. Do outro lado, a transição é para que as barras voltem ao seu tamanho e posições originais também de forma animada.
Claro, existem mais formas de fazer, mas essa foi a que conseguir fazer de forma mais simples e rápida aqui :)
Fiz um codepen rápido e você pode ver funcionando aqui: https://codepen.io/wandersonmaceds/pen/poyemON?editors=1100