Por favor, necesito ayuda con la barra de navegación (vista móvil). Quiero usar jQuery para abrir y cerrar el menú. Este es mi primer proyecto de desarrollo web
https://github.com/alwayswantedtocode/mi-primer-proyecto-de-desarrollador-web
.toggle() no es suficiente!
Use eliminar/agregar clase en su lugar.
$('.navigation').removeClass('').addClass('')Puedo ver que está definiendo su función $ (Documento) .ready en cada función, no hay necesidad de eso considerando que tendrá la mayoría de sus funciones JQuery ejecutándose dentro de él, por lo que solo puede definirlo al comienzo de su proyecto . Luego colocará las otras funciones dentro de solo esa función document.ready.
Si desea una forma simple de resolver esto, puede usar el siguiente código:
$(document).ready(() => { $('.menu-Icon span').click(() => { $('.navigation').addClass('open'); $(".navigation").removeClass('close'); }); $(".X-close").click(() => { $(".navigation").toggleClass('close'); }); });esto eliminará la clase "cerrar" cada vez que lo abra y agregará la clase abierta, cuando cierre el menú después, volverá a agregar la clase cerrada.
Hay otra opción con una función JQuery incorporada que podría hacer que se vea un poco mejor que simplemente aparecer.
Pondrías lo siguiente en tu JQuery
$(document).ready(() => { $('.menu-Icon').click(() => { $('.navigation').slideDown(); }); $(".X-close").click(() => { $('.navigation').slideUp(); }); });
y su CSS en la línea 304 cambiaría, aquí está el fragmento editado.
@media only screen and (max-width:991px) /* Line 290 */ { .header .navigation{ position: fixed; right:-250 ;/*initially zero*/ width:250px; height: 100%; overflow-y: auto; background-color: #3e5e75; /* opacity: 0.75; */ top: 0; z-index: 1000; padding: 15px 0; transition: all 0.5s ease ; display: none; /*Changed element line 304*/ /* Changed from visibility to display */ }Para obtener más detalles sobre jQuery slideUP/slideDown, siga el siguiente enlace :)