Sous-menu dans menu Hamburger
Résolu
xHaMaz Messages postés 120 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Par flemme, je le reconnais, j'ai utilisé, dans un site que je suis en train de concevoir, un menu extrait d'un template, dont le menu hambuger en version mobile est lancé via le script javascript suivant :
(() => {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');
})})()
Jusque là tout fonctionnait bien quelle que soit la taille d'écran.
J'ai voulu ajouter un sous-menu à ce menu et, si le menu fonctionne toujours bien dans le format "ordinateur, il n'en est pas de même en format mobile. Le menu s'affiche bien lorsque je clique sur le hamburger mais le sous-menu n'apparaît pas alors qu'il est bien présent, j'ai vérifié avec l'inspecteur de Firefox.
Je suppose donc qu'il s'agit d'un problème au niveau du script javascript du hamburger, mais je n'y connais rien en javascript. J'ai bien essayé de m'y mettre mais mon cerveau de septuagénaire n'y arrive pas.
Mon code 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>
Par avance, merci de l'aide qui me sera apportée.
Bien cordialement,
Patricia
Macintosh / Firefox 78.0
- Sous-menu dans menu Hamburger
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
3 réponses
Bonjour
(() => {
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');
});
})();
Normalement avec ça ça ajoutera un gestionnaire d'événement de clic sur le lien "déroulant" qui affichera ou masquera le sous-menu quand tu cliqueras dessus.
