Criando um ícone menu hamburguer animado - CSS puro - 1/2
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2025
- Esse é o vídeo 1 de 2, onde eu vou ensinar a criar um menu fullscreen animado com um botão hamburguer, tudo em CSS puro.
Link do experimento:
willianjusten....
Post com explicações e código:
willianjusten....
Mais sobre mim e outros posts em willianjusten....
Me sigam no Twitter: / willian_justen
Se inscrevam no Slack: slack-willianj...
Vários cupons de cursos meus por apenas R$ 19,99!
www.udemy.com/...
www.udemy.com/...
www.udemy.com/... - วิทยาศาสตร์และเทคโนโลยี
![[LIVE] : ONE ลุมพินี 96 | คู่เอก "คมอาวุธ vs พันฤทธิ์"](http://i.ytimg.com/vi/ofERaO0gOsE/mqdefault.jpg)
Sensacional! Tanto o efeito quanto o formato do vídeo! Vou esperar pela segunda parte =)
Yey, muito obrigado Débora! Amanhã já sai a segunda parte xD
Explicação SUPIMPA! Quiçá todos os criadores de vídeos de orientação, fosse assim bem explícito. PARABÉNS!!!
brabo d mais, seu canal ajuda as pessoas até hoje
Gostei bastante do jeito que as explicações foram dadas. Conteúdo bem intuitivo. Parabéns
Muito obrigado mano, eu consegui aprender e absorver bastante coisa nessa aula, você é o cara, +1 inscrito ♥😄
Só tenho a dizer que já estava procurando uma maneira de fazer um menu hambúrguer diferenciado dos demais. E acabei hoje achando no seu canal este vídeo sensacional, que surpreendeu minhas expectativas pois este menu é justo algo que eu procurava. E você tem uma ótima didática, é fácil e simples de acompanhar e fazer. Agora sim meu site que é meu primeiro projeto vai ter um menu. hahaha
Muito bom, cara comprei alguns dos seus cursos, eu era back end e estou me aventurando no front-end esse ano gostei do video, mas também gostei muito de ter entendido e ja ter conhecimento de todas as propriedades que você usou no css, pensei que era bem mais difícil mas com suas dicas tudo fica mais fácil.
O mundo Frontend nem é assim tão difícil xD
E eu tô indo ao contrario, do front pro back kk
Vcs dão alguma dica? Vou de Node
E quero trabalhar com sistemas e.e
cara, muito obrigado, ja tava atrás disso a muito tempo, parabens cara, ja dei meu like. fiz umas mudanças com javascript mas o seu video foi essencial para um projeto meu, parabens e muito obrigado
Fenomenal meu irmão
Muito Boa sua Didática
Parabéns 👏🏼👏🏼
Fantástico!! Sua forma de explicar é muito clara e perfeita, adorei!
Muito show. Simples, criativo e objetivo (fora que ainda explica o conceito por trás). Adore ❤
Fenomenal !!! Se pudesse dar mais de um like , com certeza eu daria. Valeu.. bora pra segunda parte! Abraço!
1
Ficou muito bom ! Willan aguardando a segunda parte, seria legal você nos próximos vídeos fazer alguma coisa com SVG ( background animado,texto) fica a dica parabéns pelo trabalho! :)
Opa Antonio, eu tenho um curso de SVG, onde eu ensino bastante coisa também, talvez você se interesse =D
Aqui tem um cupom com descontão! www.udemy.com/aprendendo-svg-do-inicio-ao-avancado/?couponCode=SEGUIDORBLOG
Willian Justen Cursos wow nem sabia kkk valeu pelo desconto será bem usado :D
Cara! Sou de comentar video não, mas o seu eu curti
Muuito bom, Willian. Muito obrigado por compartilhar!
Vlw a dica sobre o input show! são toques simples que fazem a diferença ..continue!!
Muito bommm, era exatamente o que precisava. Pega meu like KKKK
Cara, muito bom. eu adoro essas animações!!!
Muito bom!
Pode compartilhar mais que a gente gosta
Nice cara!!! Suas dicas é incrível. Parabéns pelo vídeo, está ótimo!!!
Vlw! =D
Muito bom o vídeo, bem explicativo! parabéns, irmão.
Didática incrível ! Parabéns e obrigado Willian.
Mano, namoral tu explica muito bem, obrigado pela aula, muito show!
excelente método, didática nota 10. muito seguro.
Top! William! Show demais!
Ficou muito bom! Parabéns pelo trabalho.
Vlw! o/
Bro, parabéns!!! Ajudou demais!!! Sucesso!
Esse exemplo só se aplica ao html e css puro. Tentei encapsular a div no Next Js e ele não entende o click de maneira alguma. Mas, se eu clicar diretamente no input ele faz o efeito de mudar as barras.
Que massa !!! muito show essa técnica
Excelente explicação, muito obrigado mesmo!!!
excelente iniciativa. boa didatica. parabens
Excelente! Parabéns!
simples e pratico ótimo vídeo
Muiiito obrigado!
E se puder se inscrever no canal, vai ajudar ainda mais a continuar com os vídeos!
Sem palavras. Top top top!!!
Aula nota 1000000000, você explica muito bem Parabéns. Amigo só queria pedir uma ajuda, tipo quando o link do menu leva para uma âncora na própria página o menu não se fecha automático e fica tampando o conteúdo, tem alguma maneira de resolver isso sem usar javascript?
Eu gostei muito dei o like, muito bom.
Mas uma coisa particular minha é que me incomoda misturar o HTML no mesmo index com CSS.
Muito bom, parabéns Willian
como faço com o plug in simple custom css?
Eu amo css3 e amei este vídeo
Parabéns, vídeo muito bom e me ajudou muito
cara tu explica mto bem, obg.
Mano, o meu menu quando clico em algum link do menu ele não volta pra animação inicial dos 3 riscos, tipo ele funciona a animação clicando nele e quando clica de novo ele troca a animação certinho mas clicando no link do menu ta ficando a animação de X quando o menu fica fechado, tem ideia do que possa ser?
Cara para o primeiro vídeo está muito bom, comecei a acompanhar seus vídeos então trate de fornecer bastante conteúdo! Abraço
Wow! Explicou Perfect!!!
Que isso
Francis Nunes que bom que curtiu =)
Parabéns, Excelente trabalho!!
Jeferson Mesquita opa, obrigado!
Ainda queremos o video 2
Uai, mas já tem faz mt tempo xD
th-cam.com/video/i5Fps4GBBns/w-d-xo.html
Tive que voltar para ver como manipula o ** se pudesse dava mais um Like XD
Continue com os videos por favor
sensacional!
sensacional
Bem mais fácil que aprender Js. Não tive muita paciência para Js, mesmo sabendo que é bem útil dependendo do que for fazer.
Por que com o Materiallize não funciona?
Eu dei uma modificada... Fiz a classe *.hamburger* ficar transparente num tempo de quase 1s (.8s), e fiz o before & after darem uma pirueta.
Ficou bem bonitinho... kk :)
Cara sensacional!
eu adorei de coração mesmo !
Muito bom o menu, pra smartphones é excelente, até pra uso no pc tbm...
Não é atoa que o whatsapp usa esse posicionamento e função de menu...
Porem notei falhas nesse menu, achei que ficou nada intuitivo o colocando na posição relative, pois quando alguém vai construir um site geralmente se coloca mais ítens e fotos pra baixo e vc rolando pra baixo a bolinha sobe e tem que subir toda a página pra cima pra cima pra aparecer a bolinha pra clicar nela.
Arrumei isso deixando o menu em posição fixa, e deixando a bolinha com efeito alfa transparente, assim mesmo rolando o site pra baixo a bolinha do menu fica fixa no rodapé, igual no whatsapp.
Porem quando se abre o menu com a bolinha no fixed e o menu na posição relative rolando o site pra baixo o menu aparece lá em cima e tem que subir até lá pra acessalo, nada intuitivo, fui e coloquei a bolinha e o menu aberto em fixed e ficou ótimo e intuitivo.
Porem quando se quer colocar mais ítens na lista oculta do menu aberto só aceita alguns itens.
E por favor se possível faça mais um vídeo ensinando colocar mais ítens na lista e até sub menus nesses itens aparecendo ao clicar neles ao invés do :hover.
krl man da hora ae !
show mano, muito bom
Bom demais! vlw!!
Cara, conteúdo sensacional. Ganhou mais 1 inscrito e like. Sumiu porque?
Muito bom!!!!!!!!
Top demais
Maravilhoso!!
caraca vc é muito BOM qissooooooooooooooooooooooooooooooooooooo
esta legal
Eh so o meu que n ta dando certo?
vc é o bichão mesmo em will kkk ficou da hora mano só queria dar uma dica aumentar a fonte do vscode na hora do video seria legal pq como não uso 2 monitores tem que ficar tirando da tela cheia
angelilton silva eita vei, mas já tá com fonte enorme... mas uma dica, não assiste e coda junto não. Assista tudo primeiro, tente absorver e prestar bastante atenção. Após isso, tente codar sozinho e caso esqueça, vá usando o vídeo para ajudar. Vai ver que essa é uma forma muito melhor para aprender.
Alguém sabe me dizer para que serve a tag: ? Eu não tinha visto até´agora
O Internet Explorer tem o Modo de Compatibilidade, criado para aplicações que só funcionam nas versões mais antigas do IE. você clica no botão em formato de folha que aparece na barra de endereços no IE, que ele renderiza como se fosse uma versão mais antiga do navegador.
Só que esse modo não fica aplicado somente para a aplicação selecionada. Qualquer outro endereço de site que for acessado, vai abrir com essa versão mais antiga.
Para resolver isso, foi criada a meta tag X-UA-Compatible, ela deve ser aplicada dentro da tag ... dessa forma:
O content="IE=Edge" diz para o IE renderizar aquela página com a versão mais recente que ele tiver. Ou seja, se o usuário clicou no modo de compatibilidade do IE9 para usar a versão 7, essa meta tag avisa que o IE deve usar sempre a versão mais recente, que no caso é o Edge.
@@droom5259 agradeço 👏👏👏👏❤️
topzera, ajudou 100%
Muito foda
Is cool that in CSS you can make the code as you want, like...
#div{
}
in instead you
#div
{
}
Diferent ideas, diferent ways to write.
Eu perdendo tempo falando em Inglês XD
parabens, tá muito bom
como faço para que o hambúrguer esteja ativo, e só diminuir quando eu clicar no X??
Seria só inverter os estilos nos estados ali, onde você tinha ativo, vai virar o normal e o mesmo para o estado normal...
@@WillianJustenCursos poxa, muito obrigada ... Fiz isso e deu certo, parabéns pelo trabalho
ganhou um inscrito
Muito código..
Prefiro por uma imagem no lugar ou baixar o ícone
Uma imagem vai ter um tamanho final (KB) maior que só texto.
Sem contar que você também vai perder a animação/interação.
Ou seja, você pode até preferir, mas estará fazendo algo pior para o usuário.
@@WillianJustenCursos ok..
kkk excluiu meu comentario teu ban vai fir quente