Cuando trato de hacer clic en el menú de hamburguesas, la barra de navegación no funciona. ¿Qué tengo que hacer?
Escribí un código html y le di a la barra de navegación una identificación especial. También le di una identificación al menú de hamburguesas para usarlo más tarde en jQuery.
En CSS, di un parámetro cuando el tamaño de la pantalla sea inferior a 991 px, ejecutaría lo siguiente. También escribí que normalmente la pantalla debería estar oculta, pero cuando hago clic en el menú de hamburguesas, la clase de navegación debería cambiar de class="nav" a "nav show", pero en mi caso no cambia.
let nav = $("#nav"); let navToggle = $("#navToggle"); navToggle.on("click", function(event) { event.preventDefault(); nav.toggleClass("show"); });
@media (max-width: 991px) { .works__item { width: 50%; } .burger { display: flex; } .nav { display: none; width: 100%; flex-direction: column; background-color: #31344e; text-align: right; position: absolute; top: 100%; right: 0; } .nav.show { display: block; } .nav__link { padding: 9px 15px; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <nav class="nav" id="nav"> <a href="#" class="nav__link" data-scroll="#features">Features</a> <a href="#" class="nav__link" data-scroll="#works">Works</a> <a href="#" class="nav__link" data-scroll="#team">Our Team</a> <a href="#" class="nav__link" data-scroll="#reviews">Reviews</a> <a href="#" class="nav__link" data-scroll="#download">Download</a> </nav> <button class="burger" type="button" id="navToggle "> <span class="burger__item">Menu</span> </button>
Varias cosas
La mayor es la posición absoluta con valores que no funcionan en absoluto.
Además, no usaría la misma ID y CLASE para la navegación: ahora tiene ID, CLASE y NOMBRE DE ETIQUETA en toda la nav
let $nav = $("#nav"); let $navToggle = $("#navToggle"); $navToggle.on("click", function(event) { event.preventDefault(); $nav.toggleClass("show"); });
.works__item { width: 50%; } .burger { display: flex; } .nav { display: none; width: 100%; flex-direction: column; background-color: #31344e; text-align: right; position: relative; } .nav a { color:white;} .nav.show { display: block; } .nav__link { padding: 9px 15px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <nav class="nav" id="nav"> <a href="#" class="nav__link" data-scroll="#features">Features</a> <a href="#" class="nav__link" data-scroll="#works">Works</a> <a href="#" class="nav__link" data-scroll="#team">Our Team</a> <a href="#" class="nav__link" data-scroll="#reviews">Reviews</a> <a href="#" class="nav__link" data-scroll="#download">Download</a> </nav> <button class="burger" type="button" id="navToggle"> <span class="burger__item">Menu</span> </button>
Puede hacer esto más brevemente como la siguiente pieza de código.
navToggle.on('click', function() { nav.toggle(); });
Si lo desea (y tal vez ya esté hecho), puede consultar la documentación de jquery para comprender completamente cómo funciona la función "alternar ()". https://api.jquery.com/alternar/