Factorisation de code de menu déroulant.

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 =)

Bonjour,

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

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

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 ...

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 :?

getElementsbyClassName

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 :(

Tu ne respecte pas la structure d'un ul et d'imbrication d'un ul dans un autre ...
tu ne peux imbriquer un ul qu'à l'intérieur d'un li ...





Toi tu codes

Code:

---

1 2 3 4 5 6 7

<ul> <li></li> <ul> <li></li> </ul>   </ul>

---

Ce qui n'est pas sémantiquement correct car un ul ne peut pas contenir directement autre chose qu'un li

Code:

---

1 2 3 4

<ul> <li> ICI </li> </ul>

---

ce qui donne

Code:

---

1 2 3 4 5 6 7

<ul> <li> <ul> <li> </li> </ul> </li> </ul>

---

voici un exemple rapide avec Jquery de ce que cela pourrait donner ...
Tu remarqueras la concision du code par rapport a ton premier essai ...
https://jsfiddle.net/rda1afzk/119/

Ok j'ai bien compris le principe de la structure de ul avec li. J'ai corrigé cela mais si on reste sur le même code en faisant ces changements, il n'y a pas de grand changement vis à vis du JS... Donc d'ou viendrait le souci ?

Merci pour la partie JQuerry ! Même si j'ai du mal à la comprendre

Bonjour,

sinon, il y a ça : MENUS multi-niveaux CSS jQuery

• https://codepen.io/jreaux62/pen/dPxKKQ
• https://codepen.io/jreaux62/pen/eedRwL

Remarque : le :hover (ou mouseenter/mouseleave) est "has been" depuis le "tactile"...

Je n'ai pas regardé en détail, mais il y a fort à parier que le souci vienne des sélécteurs
Quand tu es sur un alpha il faut pointer sur le beta enfant direct

Oui effectivement le :hover peut être un problème pour le tactile, j'ai donc modifié par des "click" dans la version JQuerry.

Spacefrog : J'ai modifié aussi, dans la première version, dans le JS, le système de passage de la souris par des clicks avec "onclick" mais meme si je click sur les "beta" y'a pas de changement...

https://jsfiddle.net/rda1afzk/131/

Merci Jreaux62 pour tes liens !! c'est ça que je cherche !! Bon faut que je les décryptes maintenant car j'aime pas trop copier/coller bêtement sans savoir ce que je fais =)

Tu as bien en effet un souci de selecteur

tu ne peux pas ajoute en bluk un event sur une collection document.getElementsByClassName
tu dois boucler sur element de la collection pour lui attribuer l'event ...

Code:

---

1 2 3 4 5

var unroll = document.getElementsByClassName('alpha'); unl= unroll.length; for (i=0;i<unl;i++){ forunroll.addEventListener("onclick", deroulement, false); }

---

de plus dans ta fonction déroulement il faudra tenir compte de l'element cliqué poru appliquer le display de façon relative (enfants )puis de même boucler sur la collection pour attribuer le display

Code:

---

1 2 3 4 5 6 7

function deroulement(e){ var unroll =e.target.getElementsByClassName('beta'); unl= unroll.length; for (t=0;t<unl;t++){ unroll[t].style.display=( unroll[t].style.display=="block")?"none":"block"; }

---

Citation:

---

Envoyé par d3LTa7

Merci Jreaux62 pour tes liens !! c'est ça que je cherche !! Bon faut que je les décryptes maintenant car j'aime pas trop copier/coller bêtement sans savoir ce que je fais =)

---

J'avais justement organisé un "jeu" ICI *:
En y allant étape par étape.
Avec un codepen pour chaque étape.

* Il s'agit plus précisément d'une série d'exercices, sur l'utilisation du CSS dans la réalisation d'un MENU multi-niveaux.

Merci pour vos réponse !!

Je me rend compte que j'ai encore beaucoup à apprendre et que je suis loin de comprendre encore bien les rudiments de JS et de Jquerry...

C'est vraiment pas facile mais je vais y arrivé, faut juste que j'arrive à comprendre la logique et la mécanique...

On écrit "jQuery".
Pas "Jquerry"...

Mon conseil :
Commence par des exercices SIMPLES.

• Ne cherche pas à adapter tout de suite à tes besoins. (sinon, tu vas te décourager très vite, par manque de compréhension)
• Comprends d'abord le fonctionnement.
• Ensuite seulement, adapte.

Jquery simplifie les choses car il n'y a plus besoin de boucler sur la collection on peut attribuer un event en bulk en une seule ligne

Code:

---

1 2 3

$('.alpha').on('click', function(){ $(this).find('>.beta').show(); })

---

sinon un autre full css de notre ami Lcf.vs https://lcfvs.github.io/css-ui/

Citation:

---

Envoyé par jreaux62

J'avais justement organisé un "jeu" ICI :
En y allant étape par étape.
Avec un codepen pour chaque étape.

---

Merci Jreaux mais je ne comprend pas ton lien ! Il m’amène directement sur une discussion flex/IE

Exact.

Et je donne la solution à chaque exercice/étape.

Ha ok !! Mais j'ai peur de pas bien comprendre au final...

Ou est le jeu en question ? Ou est l'exercice :/

Sinon, oui effectivement je m'attaque p'tet a du "gros" alors que j'aborde JS que depuis 2 semaines environs (pour le moment j'ai suivi que quelques cours de base par vidéo et un exercice très basique sur un jet de dé).

Citation:

---

Envoyé par d3LTa7

J'avais justement organisé un "jeu" ICI *:

---

* Il s'agit plus précisément d'une série d'exercices, sur l'utilisation du CSS dans la réalisation d'un MENU multi-niveaux - Full CSS (:hover).
L'affichage des sous-menus s'effectue sur le :hover.

Au final on obtenait :
Solution Exercice 8 : https://codepen.io/jreaux62/pen/MOVwKx

Dont la version complète est :

• MENU multi-niveaux - Full CSS (:hover)
  https://codepen.io/jreaux62/pen/vWaMgr

(mais le :hover montre sa limite dès qu'on est sur écran tactile)


Le jQuery n'y est pas abordé. :aie:
(trop compliqué pour les 2 "joueurs" concernés... et j'ai abandonné l'idée de leur expliquer via un autre "jeu"...)

Ha ok je vois !! c'est vrai que le rendu, rien qu'avec le CSS, est plutôt bien sympa... Après moi qui connais un peu le CSS j'avoue qu'il y a des lignes qui me pose questions ainsi que certaines propriétés !!

C'est en lisant ce genre de code qu'on se rend compte qu'on ne sais rien... Y'a un coté démoralisant mais un coté motivant XD