Discussion :

[Goosh]

Bonjour ou bonsoir à tous,

Je suis totalement débutant, j'espère ne pas relancer un sujet...
J'essai de construire un menu responsive en utilisant du javascript et j'aimerais qu'au hover de mon menu s'injecte une class .showmenu(déjà créée en css) au submenu et que cette règle s'applique uniquement lorsque ma fenêtre fait plus de 700px.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var x = window.matchMedia("(max-width: 700px)")
   myFunction(x)
   x.addListener(myFunction) 
 
   function myFunction(x) {
    if (x.matches) {
      this.querySelector('.submenu').classList.toggle('showmenu');
    } else {
      ";
    }
}

j'ai trouvé quelque chose comme ça pour résoudre la taille du problème de l'écran

Code :

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

this.querySelector('.submenu').classList.toggle('showmenu');

et quelque chose comme ça pour ajouter la classe mais je ne sais pas comment mixer les deux...

J'espère être clair dans ma question !...

Merci pour votre aide

[Doksuri]

salut & bienvenue.

tu peux utiliser le css :hover {} plutot que de faire du JS #tonMenu:hover .submenu {display:block; } par exemple

ca + le media query max-width: 700px et on est good

[Goosh]

Oui merci j'y avais pensé mais je voulais me prendre la tête à le faire en JS. Mais ça ira très bien avec ta solution !
Merci pour ton aide !

[Doksuri]

mais je voulais me prendre la tête à le faire en JS

t'inquiete pas... t'auras d'autres occasions pour te prendre la tete avec du JS