1

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">&#x25BC;</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">&#x25B6;</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.

2 respuestas 2

0

Tu código esta bien. El único problema lo tenes acá

.dropdown-1 {
    display: none !important;
    position: static;
    width: 100%;
}

más precisamente el problema es el !important. Element.style no te va a servir porque afecta sólo la declaración css en el atributo style in-line del elemento y no de los atributos que vienen de alguna otra parte (como tu .css).

No se porqué necesitas el !important (personalmente recomiendo usarlo como última opción, porque puede causar muchos dolores de cabeza al debuggear) pero si podes sacarlo ya no vas a tener problemas.

En el caso de que lo necesites por X razón tenes que usar Element.setAttribute así:

menuDesplegable.setAttribute('style', 'display: block !important');
1
  • Excelente @gauchoscript. Tome tu consejo y limpie mi codigo css de todos los !important que tenia. Estoy en proceso de aprendizaje y estudio y no sabia que podia ocasionar problemas en el debuggeo. Limpiando el codigo si me funciono la funcion perfectamente. De igual manera aprendi a hacerlo de la otra manera. Eres un genio Commented el 4 mar. 2021 a las 17:03
0

se que la pregunta ya esta resuelta. pero es que note que cuando la pantalla es mas amplia de 480px te marca en la consola como función no definida.

function mostrarMenu(){
if(window.innerWidth<=480){
    let menuDesplegable = document.getElementById('menu-movil');
    if(menuDesplegable.style.display === "none") {
        menuDesplegable.setAttribute('style', 'display: block !important');
    }else{
        menuDesplegable.setAttribute('style', 'display: none !important');
    }
}

}

con este código lo solucionas, además si entras desde el inspector de elementos, sigue funcionando sin necesidad de que recargues la pagina. espero te sea útil.

1
  • que capo que eres. Excelente respuesta. Me ayudo un monton a solucionar mi problema Commented el 4 mar. 2021 a las 17:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.