Discussion :

[d3LTa7]

Bonjour

Donc j'ouvre ce sujet car je suis encore novice dans le JS et encore du mal à bien choper la gymnastique mais bon... Je vais y arriver =)

Bref ma question concerne mon en-tête de page qui est simplement un menu
Dans ce menu il y a 6 catégories et dans l'une d'entre elles des sous catégorie

Mon but va vous paraitre assez simple... J'aimerais qu'au passage de la souris de certain cela ouvre la sous catégorie.

Disons que dans l'idée, le menu est horizontal que les sous catégorie qui apparaissent, s'affichent en dessous et que pour la catégorie qui contient des sous catégorie, celles ci s'ouvre sur le coté, sans que la première se ferme

J'aimerais savoir si déjà il était possible de ne faire qu'un seul et même code pour cela. ou au moins juste pour les premières sous catégorie. (celle qui s'affichent vers le bas)

Pour la catégorie qui contient d'autre sous catégorie j'avais pensé au système d'accordéon de haut en bas avec les JQueryui, sauf que j'ai un peu du mal à l'utiliser pour le moment

Voici le lien de mon code :

https://jsfiddle.net/rda1afzk/53/


Merci d'avance =)

[eleydet]

Bonjour,

Je trouve les menus déroulants de ce site très élégants.

http://www.frogweb.fr/menu-deroulant-horizontal/

[SpaceFrog]

Il existe en effet des codes tout faits pour ce type de menu
mais pour t'exercer, tu pourraiss essayer de factoriser ton code ...

Au lieu de pointer sur tes élements de menu par leur id, ce qui t'oblige à le faire pour chaque item du menu, tu pourrais leur mettre un class
ainsi, au lieu d'attribuer le mouseover / mouseout sur chaque élément individuellement, tu pourrai l'appliquer en une seule fois sur tous les élements ayant la class.

genre une classe pour le niveau 1 class="niveau1"
puis une classe pour le niveau2 etc ...
Tu factorises ainsi le code qui en sera fortement réduit ...

[d3LTa7]

Merci pour vos réponses si rapides !! =)

Pour l'idée des classes j'avais essayé mais sans succès... Je vais refaire, je m'étais peu être trompé quelque part, mais de souvenir j'avais mis une class en plus de l'id sur le HTML et changé les "getElementById" en "getElementbyClassName"

Ou alors j'ai pas compris un truc

[SpaceFrog]

getElementsbyClassName

[d3LTa7]

Ha oui désolé j'avais oublié le "s" mais utilisant Brackets je n'ai pas ce souci de faute de frappe

J'ai testé la méthode que avec le CSS... Ça marche super mais j'aimerais vraiment utiliser JS et JQ pour cela... (de plus cela ne marche que pour 1 niveau de sous menu)

J'ai donc essayé la méthode avec des "class" :

https://jsfiddle.net/rda1afzk/93/

Sans succès