← Voltar na listagem

Criando ícone menu hamburguer animado com CSS puro

Nesse post/vídeo eu ensino como criar esse ícone animado para na segunda parte integrar a um menu real e bem legal.

Introdução

Fala pessoal, como o ultimo post que eu escrevi teve uma recepção muito legal, resolvi dar continuidade e ensinar coisinhas úteis com css, que podem ser interessantes e utilizadas no seu dia-a-dia de trabalho.

Eu resolvi fazer em vídeo, porque fica mais fácil de mostrar cada detalhe, e bom, assim se você nunca fez um curso meu, já pode ver a didática para ver se gosta.

A proposta desses vídeos é fazer algo bem "cru", sem edições, assim você vai vendo de fato na prática como eu fui fazendo as coisas e explicando e até mesmo os erros (que, é claro, sempre acontecem). Acho que assim é melhor do que aqueles vídeos super editados, onde só tem copia/cola e no final você nem entende nada do que aconteceu. Se você achar que assim ficou muito ruim/lento, por favor, deixe seu feedback também.

Demo live

Você pode ver o exemplo final através desse link e se reparar, eu resolvi separar esse post e vídeo em duas partes, que serão:

  • Como criar o ícone hamburguer animado
  • Como criar o menu fullscreen animado

Assim fica mais leve para você, podendo ver só o que se interessa e também ajuda o meu SEO, que vai ter duas entradas diferentes =p

Vídeo

Código e detalhes

O vídeo já é bem explicativo, então eu não vou entrar em muitos detalhes, só vou deixar aqui alguns links complementares, que podem ser importantes para você, caso não tenha entendido alguns dos pedaços:

E o código que temos na aula por enquanto é, primeiro o markup html:

<body>
  <input id="menu-hamburguer" type="checkbox" />

  <label for="menu-hamburguer">
    <div class="menu">
      <span class="hamburguer"></span>
    </div>
  </label>
</body>

Onde eu criei um input e label para fazer o funcionamento do estado :checked e o hamburguer, que eu resolvi usar só um elemento e o :before e :after.

O nosso CSS dessa primeira parte ficou assim:

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #81ecec;
}

.menu {
  background: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 25px;
  right: 25px;
}

.hamburguer {
  position: relative;
  display: block;
  background: #000;
  width: 30px;
  height: 2px;
  top: 29px;
  left: 15px;
  transition: 0.5s ease-in-out;
}

.hamburguer:before,
.hamburguer:after {
  background: #000;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 0.5s ease-in-out;
}

.hamburguer:before {
  top: -10px;
}

.hamburguer:after {
  bottom: -10px;
}

input {
  display: none;
}

input:checked ~ label .hamburguer {
  transform: rotate(45deg);
}

input:checked ~ label .hamburguer:before {
  transform: rotate(90deg);
  top: 0;
}

input:checked ~ label .hamburguer:after {
  transform: rotate(90deg);
  bottom: 0;
}

Tem ali também um "reset default", que sempre uso nesses experimentos básicos e também as transitions e transforms que foram necessários para rotacionar os elementos e criar a animação necessária.

Conclusão

Bom pessoal, espero que tenham gostado do post/vídeo, é uma nova modalidade que eu quero estar testando. E se você curtiu, não deixe de se inscrever lá no Canal do YouTube e também compartilhar com a galera.

Lembrando que amanhã (se você estiver lendo no dia que lancei), vai ter a segunda parte, onde eu ensino a criar o menu. Se esse dia já passou, vai ter o link aqui direitinho para o próximo post/vídeo.