Factorisation de code de menu déroulant.

**d3LTa7** · 04/07/2018, 23h00

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** · 05/07/2018, 07h41

Bonjour,

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

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

**SpaceFrog** · 05/07/2018, 08h35

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** · 05/07/2018, 09h55

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** · 05/07/2018, 10h50

getElementsbyClassName

**d3LTa7** · 05/07/2018, 11h11

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

**SpaceFrog** · 05/07/2018, 11h52

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 :

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

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 :

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

1
2
3
4
 
<ul>
  <li> ICI </li>
</ul>

ce qui donne

Code :

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

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/

**d3LTa7** · 05/07/2018, 12h35

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

Invité · 05/07/2018, 12h35

Bonjour,

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

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

**SpaceFrog** · 05/07/2018, 13h04

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

**d3LTa7** · 05/07/2018, 13h28

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

**SpaceFrog** · 05/07/2018, 14h05

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 :

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

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 :

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

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";
    }

Invité · 05/07/2018, 14h18

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.

**d3LTa7** · 05/07/2018, 14h20

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

Invité · 05/07/2018, 14h22

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.

**SpaceFrog** · 05/07/2018, 14h31

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 :

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

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/

**d3LTa7** · 05/07/2018, 16h13

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

Invité · 05/07/2018, 16h39

Exact.

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

**d3LTa7** · 05/07/2018, 17h05

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

Invité · 05/07/2018, 18h37

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 :