Sous-menu dans menu Hamburger

Résolu

patricia@84 Messages postés 106 Date d'inscription Statut Membre Dernière intervention -
xHaMaz Messages postés 120 Date d'inscription Statut Membre Dernière intervention - 8 janv. 2023 à 00:30

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=".php"></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

A voir également:

Sous-menu dans menu Hamburger
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires
Réinitialiser menu démarrer windows 10 - Guide
Windows 11 menu contextuel classique - Guide

3 réponses

Réponse 1 / 3

xHaMaz Messages postés 120 Date d'inscription Statut Membre Dernière intervention 17

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.

Réponse 2 / 3

patricia@84 Messages postés 106 Date d'inscription Statut Membre Dernière intervention 9

Bonjour,

Merci pour votre réponse, elle a bien fait apparaître le sous-menu au click. Il ne me reste qu'un peu de CSS à faire pour améliorer la mise en page.

Réponse 3 / 3

xHaMaz Messages postés 120 Date d'inscription Statut Membre Dernière intervention 17

Niquel !

Discussions similaires

menu caché

Comment activer le Bluetooth sur une TV Samsung ?

Déblocage du mode hôtel Philips 20HF5234/10

problème avec menu caché

Mon PC marque press the esc key for startup menu

Votre réponse

Discussions similaires