En esta clase creamos el archivo main.js, index.html y styles.css y los unimos.
En el archivo html unimos la estructura del menú y el navbar e importamos las clases.
Luego en los estilos fusionamos los estilos de cada complemento e implementamos una clase inactive para ocultar nuestro menú.
.inactive {
display: block;
}
Al menú le añadimos estos estilos para ubicarlo correctamente en nuestra página.
.desktop-menu {
position: absolute;
top: 60px;
right: 60px;
background: var(--white);
width: 100px;
height: auto;
border: 1px solid var(--very-light-pink);
border-radius: 6px;
padding: 20px 20px 0 20px;
}
Lo bueno empieza en el archivo de JavaScript, es este hacemos que el hacer click en el email nos muestre y oculte el menú.
Primero llamanos a los elementos de email y menú.
const menuEmail = document.querySelector(".navbar-email");
const desktopMenu = document.querySelector(".desktop-menu");
Luego colocamos el elemento del email a escuchar cualquier click del usuario.
menuEmail.addEventListener("click", toggleDesktopMenu);
Luego creamos la funcion definida en el addEventListener como toggleDesktopMenu.
function toggleDesktopMenu() {
desktopMenu.classList.toggle("inactive");
}
<aside>
💡 En este caso classList.toggle es perfecto ya que nos permite agregar y quitar una clase secuencialmente.
</aside>
https://github.com/FROSTYLAN/Notes-JavascriptSchool/commit/8e3806ae07b3e09dc930fde029cbc2ace88fa556