Domine o Menu Toggle - Aprenda HTML, CSS e JavaScript com este Tutorial

Neste tutorial, você irá aprender a como criar o efeito de menu toggle utilizando HTML, CSS e JavaScript.
O menu toggle é uma funcionalidade muito utilizada em sites e aplicativos web que permite mostrar e ocultar o menu de navegação de forma dinâmica e interativa. Vamos passar juntos por cada etapa do processo, desde a criação do HTML e do CSS, até a adição de interatividade com JavaScript, sem plugins, sem frameworks.
🎥 𝗩𝗜𝗗𝗘𝗢𝗦 𝗖𝗜𝗧𝗔𝗗𝗢𝗦
• Como criar o efeito de loading spinner com HTML e CSS
• Descubra como criar o ...
• Aprenda a personalizar o seu vscode
• Aprenda a personalizar...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗
/ discord
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
Twitch: / leovargasdev
Instagram: / leuvargas
Twitter: / leovargasdev
Github: www.github.com/leovargasdev
Linkedin: / leonardo-luis-de-vargas
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💻 𝗦𝗘𝗧𝗨𝗣
OS: Pop OS 20.04
Notebook Dell (amzn.to/3lzdrdY)
Tela 1: Monitor AOC(amzn.to/402aIJ7)
Tela 2: Monitor MTEK
Suporte Ergonômico ELG (amzn.to/3lrlslj)
Hub USB C p/ usar na 2ª tela (amzn.to/40k7iBj)
Webcam Logitech BRIO (amzn.to/3lmcQfV)
Microfone Blue Yeticaster (amzn.to/3yNqRX0)
Teclado Redragon Varuna (amzn.to/40mhskM)
Mouse Logitech G300s (amzn.to/42rZCi2)
Mouse Pad (amzn.to/42B8YIG)
Estante (amzn.to/3FY7zSR)
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
#domineomenutoggle #menutoggle #efeitotoggle #tutorialcss #criarmenutoggle

[@leovargas]

Esse tutorial terá um vídeo complementar, onde vou construir um menu do zero, com todas as informações. Caso vocês tenham sugestão de efeito ou layout, deixem aqui nessa thread :)

[@dearde_8303]

está top, agora adiciona o menu kkkk vídeo bom

[@leovargas]

Sim, vou fazer um vídeo com o menu completo. Só não fiz nesse vídeo porque ficaria muito longo 🫠

[@thiagoaugustopinhomendes1727]

Muito bom o vídeo e melhor ainda sua didática, parabéns!

[@leovargas]

Obrigadão! 👊

[@user-nl8ug3rf1x]

aula sensacional, parabéns pelo conteúdo e pela didática impecável!

[@PereiraVini]

Muito bom, criei um menu desse mas não botei esse efeito na linha do meio, muito bacana, vou usar.

[@leovargas]

Boooa! 🚀🚀

[@misaelsapiente4124]

Otimo video. Parabéns !!!

[@leovargas]

Obrigado 😃

[@PereiraVini]

Seria legal um vídeo sobre Scrolls para deixar o site mais interativo

[@leovargas]

Isso já está no meu backlog hahahah, já tenho o projeto no figma, só falta codar :/

[@SLZGAM3R]

Dahora

[@Junior-wr8kp]

Muito massa ja vou começar a usar nos meus projetos

[@leovargas]

Boooa!

[@Thom.Zille.]

Leo, não sei se vai fazer o menu aparecendo só com um efeito (por exemplo aparecendo da direita pra esquerda), mas se possível mostrar no vídeo alguns efeitos interessantes ficaria daora (tipo fade in fade out, da direita pra esquerda, da esquerda pra direita, cima pra baixo, algum efeito que você gosta e seja diferente desses e fácil de fazer), claro se achar que o vídeo não vai ficar muito longo.

[@leovargas]

Sim, pensei em fazer uns dois efeitos, só ainda não sei quais vão ser hahahah muito obrigado pela sugestão!

[@daviprm]

perfeito!!!

[@leovargas]

Obrigado Davi!

[@lucas-nn5so]

Muito bom

[@leovargas]

Obrigado!

[@ren0257]

Show cara! Faz um com o menu aparecendo em baixo...
É simplesmente um display: hidden/block em uma div com position absolute?

[@leovargas]

claro, posso ver para fazer outra variação

[@clintonrocha4980]

Up!

[@leovargas]

🔥🔥🔥

[@ogestordetrafegopago]

*Usa o Elementor e não terá dores de cabeça*

[@kayomacedo750]

é por causa do index 0 que conta como 1

[@leovargas]

manjei, valeu!!