Submenú en el menú hamburguesa
Resuelto
xHaMaz Mensajes publicados 123 Fecha de registro Estado Miembro Última intervención -
Hola,
Por pereza, lo reconozco, he utilizado, en un sitio que estoy diseñando, un menú extraido de una plantilla, cuyo menú hamburger en la versión móvil se activa mediante el siguiente script de javascript:
(() => {const ul = document.querySelector('.header-nav-lists'); const hamburger = document.querySelector('.header-hamburger-icon'); hamburger.addEventListener('click', () => { ul.classList.toggle('show'); hamburger.classList.toggle('show'); })})() Hasta ahí todo funcionaba bien, independientemente del tamaño de la pantalla.
Quise añadir un submenú a este menú y, si el menú funciona aún bien en formato “ordenador”, no es lo mismo en formato móvil. El menú se muestra bien cuando hago clic en el hamburger, pero el submenú no aparece aunque esté presente; lo comprobé con la inspección de Firefox.
Supongo que se trata de un problema a nivel del script de javascript del hamburger, pero no sé nada de javascript. He intentado ponerme a ello, pero mi cerebro de septuagenario no puede.
Mi código html:
<nav class="header-nav-bar"> <div class="header-nav-logo"><a href="index.php"><img src="image/logo.png" alt="logo"></a></div> <ul class="header-nav-lists"> <li class="header-nav-list"><a class="header-nav-link header-active" href="index.php">Accueil</a></li> <li class="header-nav-list deroulant"><a href="#">Gîte</a> <ul class="sous"> <li><a class="header-nav-link" href="details.php">Présentation</a></li> <li"><a "header-nav-link" href="interieur.php">Intérieur</a></li> <li><a "header-nav-link" href="exterieur.php">Extérieur</a></li> </ul> </li> <li class="header-nav-list"><a class="header-nav-link" href="tarifs.php">Tarifs</a></li> <li class="header-nav-list"><a class="header-nav-link" href="visiter.php">A visiter</a></li> <li class="header-nav-list"><a class="header-nav-link" href="reserver.php">Réserver</a></li> <li class="header-nav-list"><a class="header-nav-link" href="contact.php">Contact</a></li> </ul> <div class="header-hamburger-icon"> <div class="header-hamburger-line-1"></div> <div class="header-hamburger-line-2"></div> <div class="header-hamburger-line-3"></div> </div> </div> </nav>
D’avance, merci pour l’aide qui pourra être apportée.
Bien cordialement,
Patricia
3 respuestas
Hola
(() => { const ul = document.querySelector('.header-nav-lists'); const hamburger = document.querySelector('.header-hamburger-icon'); const deroulant = document.querySelector('.deroulant'); hamburger.addEventListener('click', () => { ul.classList.toggle('show'); hamburger.classList.toggle('show'); }); deroulant.addEventListener('click', () => { deroulant.querySelector('.sous').classList.toggle('show'); }); })(); Normalmente con esto se añadirá un manejador de evento de clic al enlace "desplegable" que mostrará u ocultará el submenú cuando hagas clic en él.
