Olá, eu estou com dificuldades em raciocinar a lógica que devo usar para que eu consiga fazer com que o "menu-principal" apareça quando eu clicar no menu hamburguer. Estou há quase um mes sem praticar JS e dei uma enferrujada kkk https://codepen.io/eunathalia/pen/PoLEXVN
Olá, Nathalia!
Para isso foi necessário realizar algumas alterações no HTML, fiz algumas alterações e adições para implementar a funcionalidade do menu hamburguer:
1- Adicionei o id="menuPrincipal" ao elemento <div class="menu-content">. Isso permite que identifiquemos esse elemento de forma única no JavaScript.
2 - No botão de fechar (<button class="close-button">), adicionei um evento onclick que chama a função fecharMenu(). Isso permitirá fechar o menu quando o botão de fechar for clicado.
Essas alterações e adições no HTML são importantes para garantir que o JavaScript possa interagir corretamente com os elementos da página para exibir e ocultar o menu conforme necessário.
Sendo assim no Js mudei a lógica e adicionei algumas funções, mencionadas anteriomente no HTML, foram definidas duas funções:
1- aparecerMenu(): Esta função é chamada quando o ícone do menu hamburguer é clicado. Ela seleciona o elemento do menu principal usando document.getElementById("menuPrincipal") e então usa classList.toggle("show-menu") para adicionar ou remover a classe show-menu desse elemento. Isso faz com que o menu apareça ou desapareça dependendo do seu estado atual.
2- fecharMenu(): Esta função é chamada quando o botão de fechar do menu é clicado. Ela seleciona o elemento do menu principal usando document.getElementById("menuPrincipal") e então usa classList.remove("show-menu") para remover a classe show-menu, garantindo que o menu seja fechado.
Ambas as funções agem sobre o mesmo elemento do menu principal, manipulando a classe show-menu para controlar se o menu está visível ou não.
Seu projeto ficou assim:
O código pode ser verificado aqui:
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!