Barra de menu!

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:

1. Animar a mudança do tamanho da barra quando o mouse estiver por cima do menu
2. Animar a barra do meio para o lado inverso da posição inicial, assim ficam duas barras de um lado e a outra do outro lado.

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