4

Descripción

Tengo la siguiente barra de navegación:

<nav>
        <ul>
            <li id="ampliar">
                <img src="nav-boton.png" alt="Ampliar">
        </ul>
        <ul id="opciones">
            <div>
                </li>
                <li class="opcion">
                    <a href="index.html">Inicio</a>
                </li>
                <li class="opcion">
                    <a href="about.html">Sobre mí</a>
                </li>
                <li class="opcion">
                    <a href="contact.html">Contacto</a>
                </li>

        </ul>
    </nav>

Para no entrar en detalles sobre la estética, solo compartiré la parte que me genera conflicto. Al cargar la página, la lista con ID="opciones" está oculta:

#opciones{
                display:none;
}

Lo cual se modifica al hacer click en el objeto con ID="ampliar" mediante el siguiente script:

<script type="text/javaScript">
        window.addEventListener("load",inicio);
        function inicio(){
            document.getElementById("ampliar").onclick=function(){  
                if(document.getElementById("opciones").style.display=="none" ){ 
                    document.getElementById("opciones").style.display="block";
                }else { 
                    document.getElementById("opciones").style.display="none";
                }
            }   
        }
    </script>

Esto me funciona bien para pantallas de ancho pequeño, pero para ventanas anchas utilicé la siguiente Media Query:

@media all and (min-width: 800px){
#ampliar{
                display:none;
}

#opciones{
                display:block;
                text-align:center;
}

.opcion{
                display:inline-block;
}
}

Problema

El problema que se me presenta es que, al utilizar la pantalla por debajo de los 800 píxeles, si oculto la barra de navegación utilizando el botón "ampliar", luego al agrandar la pantalla esta permanece oculta, excepto que desde la pantalla menor a 800 píxeles deje la barra visible. Al cargar la página y antes de utilizar el botón, la barra aparece y desaparece correctamente con el cambio de tamaño, pero una vez utilizado el botón, la media query ya no funciona. No entiendo por qué no funciona, ya que el script al ocultar la barra, deja en el mismo estado display:"none" para "opciones" que sí funciona sin presionar el botón.

1
  • 1
    En CSS hay una característica que se llama especificidad y se trata del orden de importancia en que se aplican los estilos. Cuando modificas el elemento desde Javascript con element.style.display = 'none'; este se aplica directamente en la etiqueta, quedando <ul style="display:none"> y es más específico que las reglas en una hoja de estilos. Con la respuesta que te proporcionaron se debe solucionar el problema.
    – Triby
    el 15 jul. 2021 a las 14:56

1 respuesta 1

5

El elemento se queda oculto pero nunca quita el ocultos sino es con un click. Pero, también puede ser que cambies el tamaño del navegador una vez le has ocultado, con lo cual debes "escuchar" cuando el navegador cambia su tamaño, y entonces quitar el "none" según su condición.

        window.addEventListener("load",inicio);
        function inicio(){
            document.getElementById("ampliar").onclick=function(){  
                if(document.getElementById("opciones").style.display=="none" ){ 
                    document.getElementById("opciones").style.display="block";
                }else { 
                    document.getElementById("opciones").style.display="none";
                }
            }   

            window.addEventListener('resize', function(e){
              if (window.innerWidth > 800){
                document.getElementById("opciones").style.display="block"
              }
              
            })
        }
1
  • Buena respuesta, simple y efectiva.
    – Triby
    el 15 jul. 2021 a las 14:57

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.