0

Sucede que estoy haciendo una navegación adaptable y cuando el navegador llega a cierta medida de pantalla las opciones desaparecen y en su lugar aparece un icono que se supone al hacer click sobre el deberían mostrar las opciones pero no sucede nada y según mi navegador no hay errores.

Este es mi código Html:

<!DOCTYPE html>
<html lang="es-MX">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/main.css">
    <title>Menu de Navegación Estandar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <header class="headerTop">
        <div class="container">
            <nav class="mainNavbar">
               <div class="navbar__Icon" id="btnMenu"><i class="fas fa-bars"></i></div>
                <ul class="navbar__menu" id="opcMenu">
                    <li class="menu__Item"><a href="#" class="item__Link">Home</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">About Us</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Services</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Portfolio</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>  
    <script src="https://kit.fontawesome.com/b4087b7348.js" crossorigin="anonymous"></script>
    <script src="js/menu.js"></script>
</body>
</html>

este es mi JavaScript:

    'use strict'

function mostrarMenu() {
    var botonMenu = document.getElementById("btnMenu");
    var opcionesMenu = document.getElementById("opcMenu");
    var contador = 0;

    botonMenu.addEventListener('click', function() {

        if (contador == 0) {
            opcionesMenu.classList.add("menuShow");
            contador = 1;
        }else{
            opcionesMenu.classList.remove("menuShow");
            contador = 0;
        }

    });

   console.log("Funciona!");
}

window.onload = function() {mostrarMenu()};

Anteriormente en lugar de agregar o remover clases aplicaba los estilos directamente en javascript y de igual manera no me mostraba errores en la consola del navegador pero tampoco mostraba las opciones de la navegación.

3
  • "las opciones desaparecen y en su lugar aparece un icono que se supone al hacer click sobre el deberían mostrar las opciones pero no sucede nada", no son esos botones distintos?, por que ese es el sentido principal del porque no funcione.
    – Layer
    el 4 may. 2020 a las 4:36
  • 4
    El evento click funciona. Basta con mirar el inspector para ver que aparece y desaparece la class menuShow. Observación: en lugar de complicarte con lo del contador puedes utilizar el método toggle. Toggle = alternar conmutar. opcionesMenu.classList.toggle("menuShow");
    – enxaneta
    el 4 may. 2020 a las 6:46
  • Si, tambien pense lo mismo, el click funciona.
    – Layer
    el 4 may. 2020 a las 17:04

1 respuesta 1

0

En lugar de usar un contador, mejor asigna clases al menú para ocultar / mostrar, iniciando en oculto.

Al terminar de cargar la página solo se asigna el evento click del botón y en mostrarMenu() buscas la clase actual del menú, si está oculto lo muestras y viceversa, quitando y agregando clase.

'use strict'
function mostrarMenu() {
    let opcionesMenu = document.getElementById("opcMenu");
    if(opcionesMenu.className.indexOf('hideMenu') > -1) {
        opcionesMenu.classList.remove('hideMenu');
        opcionesMenu.classList.add('showMenu');
    } else {
        opcionesMenu.classList.remove('showMenu');
        opcionesMenu.classList.add('hideMenu');
    }
}

window.onload = function() {
    document.getElementById("btnMenu").addEventListener('click', mostrarMenu);
};
#btnMenu { cursor:pointer; }
.hideMenu { display:none; }
.showMenu { display:block; }
<header class="headerTop">
        <div class="container">
            <nav class="mainNavbar">
               <div class="navbar__Icon" id="btnMenu"><i class="fas fa-bars"></i></div>
                <ul class="navbar__menu hideMenu" id="opcMenu">
                    <li class="menu__Item"><a href="#" class="item__Link">Home</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">About Us</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Services</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Portfolio</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>  
    <script src="https://kit.fontawesome.com/b4087b7348.js" crossorigin="anonymous"></script>

Puede hacerse un poco más sencillo, evitando las comparaciones y cambiando las clases con toggle():

'use strict'
function mostrarMenu() {
    let opcionesMenu = document.getElementById("opcMenu");
    opcionesMenu.classList.toggle('hideMenu');
    opcionesMenu.classList.toggle('showMenu');
}

window.onload = function() {
    document.getElementById("btnMenu").addEventListener('click', mostrarMenu);
};
#btnMenu { cursor:pointer; }
.hideMenu { display:none; }
.showMenu { display:block; }
<header class="headerTop">
        <div class="container">
            <nav class="mainNavbar">
               <div class="navbar__Icon" id="btnMenu"><i class="fas fa-bars"></i></div>
                <ul class="navbar__menu hideMenu" id="opcMenu">
                    <li class="menu__Item"><a href="#" class="item__Link">Home</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">About Us</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Services</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Portfolio</a></li>
                    <li class="menu__Item"><a href="#" class="item__Link">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>  
    <script src="https://kit.fontawesome.com/b4087b7348.js" crossorigin="anonymous"></script>

Tu Respuesta

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

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