Tengo un problemita con un codigo que estoy escribiendo. En mi pagina tengo un menu desplegable que funciona mediante el css 'hover'. Sin embargo para las versiones moviles no me sirve esta opcion ya que las pantallas son tactiles y no hay un puntero. Quuiero hacer que mi menú sea desplegable mediante javascript. Escribí la funcion que pense que me funcionaria pero no fue asi.
Anexo el codigo HTML
<header class="site-header contenedor">
<img class="logo-inicio" src="img/logo_vagabundos.png" alt="logo_principal" width="250px" height="80px" style="display: none;">
<nav class="menu-area">
<ul>
<li class="li-menu" onclick="mostrarMenu()"><a href="">Menú<span class="arrow">▼</span></a>
<ul id="menu-movil" class="dropdown-1">
<li><a href="#">Inicio</a></li>
<li><a href="quienes-somos.html">Quienes Somos</a></li>
<li><a href="musica.html">Musica</a></li>
<li><a href="artistas.html">Artistas</a></li>
<li><a href="galeria.html">Galeria<span class="arrow">▶</span></a>
<ul class="dropdown-2">
<li><a href="galeria.html#fotos">Fotos</a></li>
<li><a href="galeria.html#videos">Videos</a></li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</li>
<li class="li-logo-novedades"><img src="img/logo_vagabundos.png" alt="logo_principal" width="250px" height="80px"></li>
<li class="li-logo-novedades"><a href="#">Novedades</a></li>
</ul>
</nav><!--Menú de navegación-->
</header>
Este es el codigo de mi menu que funciona correctamente en la version de escritorio. El funcionamiento lo realizan las propiedades css que anexo a continuacion.
.menu-area a {
color: #ffffff;
background: #000000;
display: block;
height: 8rem;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.4s;
}
.li-menu > a {
pointer-events: none;
}
.menu-area a:hover {
background: #ff6347;
}
.menu-area ul {
list-style: none;
display: flex;
}
.menu-area li {
width: 100%;
text-align: center;
position: relative;
}
.menu-area li:hover .dropdown-1 > li {
display: block;
top: 0;
}
.dropdown-1 li {
display: none;
position: absolute;
top: 0;
}
.dropdown-1 {
display: flex;
flex-direction: column;
position: absolute;
width: 100%;
}
.dropdown-1 a {
background-color: rgba(0,0,0,0.8);
height: 6rem;
font-size: 1.6rem;
}
.dropdown-1 li {
position: relative;
}
.dropdown-1 li:hover .dropdown-2 li {
display: block;
}
.dropdown-2 li {
display: none;
}
/*Estilos para .dropdown-2*/
.dropdown-2 {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 100%;
width: 12rem;
}
.arrow {
margin-left: 0.8rem;
font-size: 1.2rem;
color: #ffffff;
}
Seguido a este código modifique el css para los Media Query de los dispostivios mas pequeños. Anexo el media query.
@media only screen and (min-width:170px) and (max-width: 480px) {
.logo-inicio {
display: block !important;
width: 100%;
}
.menu-area a {
display: block;
width: 100%;
height: 6rem;
padding: 1.5rem;
font-size: 2rem;
}
.menu-area ul {
display: block;
}
.menu-area li {
position: static;
}
.dropdown-1 li {
display: block;
position: static;
}
.dropdown-1 {
display: none !important;
position: static;
width: 100%;
}
.dropdown-1 a {
background-color: rgba(0,0,0,0.8);
height: 6rem;
font-size: 2rem;
}
.dropdown-1 li {
position: static;
}
.dropdown-2 li {
display: block;
}
.dropdown-2 {
display: none !important;
position: static;
width: 100%;
}
.li-logo-novedades {
display: none;
}
En este código dentro del media query el menu funciona en forma de bloque y ya estan ocultos los campos que deseo mostrar mediante JavaScript de manera correcta. Ahora anexo el codigo que escribi on JavaScript para mostrar lo oculto y que no me funciona por alguna razon que desconozco.
let anchoPantalla = window.innerWidth;
if (anchoPantalla <= 480 ) {
function mostrarMenu() {
let menuDesplegable = document.getElementById('menu-movil');
if (menuDesplegable.style.display === "none") {
menuDesplegable.style.display = "block";
} else {
menuDesplegable.style.display = "none";
}
}
}
En esta funcion almaceno el tamaño de la pantalla en una variable para luego realizar un condicional que cree la funcion mostrarMenu() si se cumple con la condicion que especifiqué la cual es que la pantalla sea menor o igual a 480px. Hago el llamado a la funcion desde el HTML estando en un pantalla de prueba de 320px y no se ejecuta la funcion escrita.
Cualquier apoyo para este problemita seria recibido amablemente.