Criando ícone menu hamburguer animado com CSS puro | HungLD
Ngày 31 tháng 05 năm 2018 • 3 phút đọc
Nesse post/vídeo eu ensino como criar esse ícone animado para na segunda parte integrar a um menu real e bem legal.
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.
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
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:
Seletores CSS importantes para aprender
Como usar o input:checked num exemplo de switch button
E o código que temos na aula por enquanto é, primeiro o markup html:
<input id="menu-hamburguer" type="checkbox">
<label for="menu-hamburguer">
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:
.hamburguer:before {
input:checked ~ label .hamburguer {
input:checked ~ label .hamburguer:before {
input:checked ~ label .hamburguer:after {
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.
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.