31 de maio de 2018 • 3 min de leitura
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.