Noob question . Estoy practicando con un sitio web; y tengo un menú alternable que aparece cuando llega a un cierto ancho (250-750px) y desaparece cuando llega a 751px. Cuando inserto un script js, permanece oculto.
CSS
@media (min-width: 250px) and (max-width: 750px){ .headernav ul li { width: 100%; display: block; background-color: hsl(3, 43%, 56%); opacity: 0; transition: .5s; } @media (min-width: 751px){ .headernav ul li{ opacity: 1; } }Aquí está el código js
let toggledNavMenu = false; function toggleMenu(){ let getMenu = document.querySelector(".menu"); let getLi = document.querySelectorAll(".headernav ul li"); let liSize = getLi.length; if(toggledNavMenu == false){ for (let i = 0; i < liSize; i++) { getLi[i].style.opacity ="0"; } toggledNavMenu = true; } else{ for (let i = 0; i < liSize; i++) { getLi[i].style.opacity ="1"; } toggledNavMenu = false; } }El problema es que si hago clic en el menú; y la opacidad se establece en 0 en el script js, el menú permanece oculto cuando amplío la pantalla. Así que básicamente termino con un menú invisible. Dejaré una secuencia de imágenes para explicarlo mejor. La única forma de arreglar esto es ir a un ancho <= 750 para que se muestre el botón y luego hacer clic en él, lo que hace que la opacidad vuelva a 1 y es realmente molesto.
Cuando el ancho es <= 750, aparece el menú alternable
Sentí que escribiste muchos códigos innecesarios como funciones de bucle para una barra de navegación simple.
codigo css
@media (min-width: 250px) and (max-width: 750px){ .menu{ display: none; } }codigo js
function toggleNav() { var toggledNavMenu = document.getElementById(".menu"); if (toggledNavMenu.style.display === "none") { toggledNavMenu.style.display = "block"; } else { toggledNavMenu.style.display = "none"; } } // just piece of cake ;)Estás haciendo mal el trabajo.
Primero: instale jQuery, es lo suficientemente simple para un novato. Segundo - Explora y aprende. Tercero - Implementar.
En la mayoría de los casos, los elementos css están vinculados a eventos jQuery/Javascript. Entonces, cuando pasa el mouse, agrega la clase 'activa' al elemento en el que se hizo clic. También agrega otra clase al padre.
Entonces obtienes
<ul class="dropdown-is-active"><li class="selected"> ... </ul>Básicamente, reaccionas a los eventos, agregas/eliminas clases y redactas CSS correctamente. Recuerde que es difícil hacer un menú desplegable uniforme. Siempre es algo limitado.