Discussion :

[RowanMayfair]

Bonjour,


Je suis confrontée à 2 problèmes qui me paraissent très bêtes, mais que je ne sais pas résoudre.

1) J'ai donc une barre de navigation. Le HTML ressemble à ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav>
            <div class="logo">
                <img src="./images/CaptureLogo.PNG" alt="logo du site monsite">
            </div>
            <div class="navbar">  
 
                    <ul class="links">
                        <li class="menu">
                            <a href="#">Accueil</a>
                        </li>
                        <li class="menu">
                            Test<span class="chevron">  &blacktriangledown;</span>
                            <ul class="sub-menu">
                                <li><a href="#">Débutant</a></li>
                                <li><a href="#">Intermédiaire</a></li>
                                <li><a href="#">Confirmé</a></li>
                                <li><a href="#">Avancé</a></li>
                            </ul>
                        </li>      
                    </ul>
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuK6B0_VRCkC5yToC6GPHAUHjBXuAGDKfIrA&usqp=CAU" alt="icone hamburger pour les écrans les + petits" class="hamburger">
            </div>    
        </nav>

en gros.
Evidemment, je souhaiterai que quand mon user clique sur le hamburger le menu se déroule, puis quand il clique sur un menu le sous-menu apparaît à son tour.

En JS, j'ai donc ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const hamburger = document.querySelector(".hamburger");
const links = document.querySelector(".links");
 
 
if (window.innerWidth <= 970) {  
 
  hamburger.addEventListener("click", () => {
    links.classList.toggle("toggle-hamburger");  // l'ul de tous les menus  
  });
 
  for (let i=1; i < 5; i++) { 
    menus[i].addEventListener("click", () => {
      sousMenus.forEach(sousMenu => sousMenu.classList.remove("toggle"));
      const sousMenu = menus[i].querySelector(".sub-menu");
        sousMenu.classList.toggle('toggle');
 
 
  }); 
}
 
}

Sauf que, tel quel, ça ne fonctionne pas. En tout cas, le toggle sur le menu ne fonctionne pas, quand je re-clique dessus il ne se ferme pas.


2) Autre chose, je souhaiterai aussi que quand mon user clique ailleurs sur la page, le menu se ferme.
Sauf que dès que je mets un eventListener sur body par exemple, j'ai une erreur JS, qui me dit qu'il ne peut pas mettre un EventListener sur undefined.

Comment on fait ça ?



D'avance merci de votre patience

[NoSmoking]

Bonjour,
tu écris cette ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

menus[i].addEventListener("click", () => {

mais où sont définis ces menus[i], oubli dans ton code ?

Un plus serait que tu nous fournisse également le CSS appliqué à ces éléments.