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.
menuShow
. Observación: en lugar de complicarte con lo del contador puedes utilizar el métodotoggle
. Toggle = alternar conmutar.opcionesMenu.classList.toggle("menuShow");