Menu multi-niveaux - flex

Invité · 17/11/2017, 09h48

Envoyé par laurentSc

Pas franchement d'accord car certes je suis reparti de ton code mais j'ai fait l'effort de le comprendre et de le modifier...

C'est vrai...
Je t'accorde le fait qu'il fallait comprendre le code pour pouvoir copier-coller la BONNE partie !

Montre-nous ton code corrigé

**laurentSc** · 17/11/2017, 13h45

La proposition de JefReb au post #79 est intéressante, mais pas sûr que ça marche avec la correction que j'ai dû apporter :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
    position : absolute;
    width:100%;  
  }
 
 #navMain > ul > li > ul > li {
            position : relative; 
            width:100%;
	 }
 
  /*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul > li > ul > li > ul {
    left:100%;/*SOUS-SOUS-MENU à droite*/
    top:0; 
	}

Les lignes 6 à 9 pour que le top:0; de la ligne 14 se réfère au li du menu de niveau 2 et non au ul.

Invité · 17/11/2017, 14h13

Code css :

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

1
2
3
4
 #navMain > ul > li > ul > li {
            position : relative; 
            width:100%;
	 }

à quoi sert cette partie ?
en a-t-on vraiment besoin ?
que se passe-t-il si on l'enlève ?
peut-on s'en passer ?
...

Laurent, je constate que tu ne comprends toujours pas pourquoi on positionne un élément.
Pourtant, tout a été dit.

Tant que tu ne comprendras pas, tu ne dois pas continuer les exercices : tu ne feras que t'enfoncer dans le flou.

Sur cette page, il y a des explications, et même des codepen : CSS : position

-> LIS TOUT !
-> TESTE TOUS les exemples !

(extrait)

Positionnement relatif

Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document.

Positionnement absolu

En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments.

COMPRENDS-TU ce que ça veut dire ? OUI ou NON ?

**JefReb** · 18/11/2017, 12h00

Bonjour Jreaux62,
J'ai été intrigué par ton affirmation:

Mais si on en ajoute un suivant, là ça n'ira plus, car tu ne cibles plus précisément un niveau de menu,
et il faudra des contre-instructions pour les niveaux suivants, ce que je ne veux pas.

J'ai donc voulu tester le code que j'avais soumis et mettant jusqu'à 5 sous-niveaux.
Mais je suis d'accord avec toi,

*Pour moi, c'est LARGEMENT suffisant !
En ajouter encore un serait anti-ergonomique

et j'ajouterais, insupportable.

Mais

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#navMain > ul ul {
    position : absolute;
    width:100%;
    top:100%
    left:0;  
  }
 /*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul  ul  ul {
    left:100%;      /*SOUS-SOUS-MENU à droite*/
    top:0;  
  }

fonctionne parfaitement.
J'ai rajouté au sous-menu 1.3 ...
https://codepen.io/JefReb/pen/yPpJNM

Le problème de la compréhension passe par l'exercice et les essais pour comprendre et surtout comprendre le principe de la cascade.

Et pourtant quelques essais avec des fichiers html temporaires pour tester la cascade avec les enfantts directs ou non direct ou héritage et descendants, est très facile à comprendre.
Mais j'en suis passé aussi par là ... il n'y a même pas très longtemps

Invité · 18/11/2017, 12h16

Envoyé par JefReb

Le problème de la compréhension passe par l'exercice et les essais pour comprendre et surtout comprendre le principe de la cascade.

C'est tout-à-fait ça !
C'est en forgeant qu'on devient forgeron !
Et en se mouchant qu'on devient moucheron...

Quant à la question...
Chaque niveau est différent des autres !
Néanmoins, certaines instructions sont COMMUNES, d'autres des cas particuliers.

Le menu de niveau 1 : on l'affiche tantôt à l'horizontal, tantôt à la vertical
Le sous-menu de niveau 2 : on l'affiche en dessous
Le sous-menu de niveau 3 : on l'affiche tantôt à droite, tantôt à gauche

Mais si on ajoute ENCORE un niveau.... ben là je ne sais plus où l'afficher !

en dessous ? encore à coté ? par dessus le niveau précédent ?...
C'est trop !

CELA DIT, le problème se pose surtout avec :hover : ça devient cite une galère sans nom d'arriver à "attraper le menu" !

"Au clic" (cf mon autre code "au clic", avec jQuery), plus de souci !
On met autant de sous-sous-sous-....-menu qu'on veut :

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

**JefReb** · 18/11/2017, 14h25

Exact!
Rien à ajouter. Merci.

**laurentSc** · 18/11/2017, 23h05

Coucou, me revoilou

D'abord, merci jreaux62 de m'avoir incité à réviser le positionnement (j'avais déjà vu tout ça, mais ça a renforcé mes connaissances). (D'ailleurs, en faisant des essais, je suis tombé sur une incompréhension qui va générer une nouvelle discussion)(pour ne pas rester idiot toute ma vie selon Einstein).
Merci aussi de m'avoir fait prendre conscience que je risquais de me transformer en moucheron (post #85)

(j'ai la crève donc suis fortement concerné).

Pour revenir aux choses sérieuses, je répond au post #83 :

cette partie sert à positionner les <li> des sous-menus de niveau 2 donc que le top:0; des <ul> de niveau 3 se réfère au <li> de niveau 2 correspondant
oui
si on ne la met pas, le le top:0; des <ul> de niveau 3 se réfère au <ul> de niveau 1 (1e ancêtre positionné) et aussi le top: 14px; des flèches des sous-menus de niveau 2 indiquant un sous-sous-menus de niveau 3 : https://codepen.io/laurentsc/pen/gXoGmd/
non
...

Invité · 19/11/2017, 08h59

Bonjour Laurent.
J'ai pas compris ce que tu demandes.... Fais des phrases complètes...

Concernant ta "V6 buggué".
Il manque quelque chose pour que ça fonctionne.

SI tu as COMPRIS le positionnement, tu dois pouvoir le trouver toi-même.
Sinon........ Relis la documentation, fais les exercices,....

N.B. ton code ressemble de plus en plus à une poubelle : NETTOIE-LE !

OPTIMISE ! Mets JUSTE ce qui est NECESSAIRE
supprime ce qui est inutile
et quand je te donne des corrections, utilise mon code

Invité · 19/11/2017, 09h37

Pour mémoire :

Envoyé par jreaux62

Exercice 6 :

Ajouter un sous-sous-menu (niveau 3) au menu "A" (pas de flèche pour l'instant)
Desktop : l'afficher (avec :hover) A DROITE le son parent
~~Phone : l'afficher (avec :hover) DANS le menu~~

Phone : on OUBLIE ! C'est le comportement normal. Donc RIEN A ECRIRE ICI !

Exercice 7:

Ajouter la flèche pour ce sous-sous-menu. La faire pointer vers la droite
:hover : la faire pointer vers la gauche

**laurentSc** · 19/11/2017, 11h43

Bonjour Jérôme,

la V6 débuggée, je l'avais déjà faite, mais ce que j'avais fait était à l'intérieur du media-querie pour le desktop, donc j'ai amélioré la correction car il fallait l'appliquer dans tous les cas : https://codepen.io/laurentsc/pen/gXoGmd/

Code css :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
  box-sizing: border-box;
}
 
 
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
 
/* ------------------------------- */
/* fleche, avec rotation */
#navMain li.hasSub:after  {
  position: absolute;
  content: "\25BC";
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
 
  -o-transform: rotate(0deg);
  -o-transition: -o-transform 0.5s;
  -ms-transform: rotate(0deg);
  -ms-transition: -ms-transform 0.5s;
  -moz-transform: rotate(0deg);
  -moz-transition: -moz-transform 0.5s;
  -webkit-transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.5s;
  transform: rotate(0deg);
  transition: transform 0.5s;
}
 
#navMain li.hasSub:hover:after {
  -o-transform: rotate(180deg);
  -o-transition: -o-transform 0.5s;
  -ms-transform: rotate(180deg);
  -ms-transition: -ms-transform 0.5s;
  -moz-transform: rotate(180deg);
  -moz-transition: -moz-transform 0.5s;
  -webkit-transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.5s;
  transform: rotate(180deg);
  transition: transform 0.5s;
  color: yellow;
}
/* pour tous les liens */
#navMain a {
  display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
  padding:10px;
  font-family:Arial, sans-serif;
  color: #fff;
  background: #2980b9;
  text-decoration: none; /* ne pas souligner les liens */
}
#navMain ul li > ul {
  display:none;/* menu niveau 2 caché */
}
#navMain ul li:hover > ul {
  display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
}
#navMain a:hover {
  background: #20638f; /*change la couleur de fond*/
}
 
 #navMain li {
   position : relative;          
   width:100%;
}/* positionner tous les li */
 
 
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles  */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
@media screen and (min-width: 641px) 
{
  #navMain> ul {/* slt niveau 1 */
    display:table; /* se comporte comme une table */
    width:50%; /* largeur du menu */
    min-width:640px; /* largeur mini du menu */
    margin:0 auto; /* menu centré dans son parent */
  }
  #navMain > ul > li { 
    display:table-cell; /* se comporte comme une cellule de table */
    width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
  }
  #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
    width:100%;  
  }
 
 
 
  /*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul > li > ul > li > ul {
    position : absolute;
    left:100%;/*SOUS-SOUS-MENU à droite*/
    top:0; 
	}
#navMain > ul > li:last-child > ul > li > ul { 
    position : absolute; width:100%;
    left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
    top:0;
	}
}
}
/* ------------------------------------------------------ */

La correction apportée se situe aux lignes 72 à 75

Au post #88, tu dis ne pas comprendre ce que je demande : normal car je ne demande rien !
Elles sont où les phrases incomplètes ?
Je ne vois pas en quoi mon code est une poubelle...

Invité · 19/11/2017, 12h06

OK.

Met de l'ordre dans ton code :

ul
puis li
puis a

d'abord cas général (OK)
puis cas particulier(s) (1 niveau parès l'autre)

ex. :

#navMain li { vient avant #navMain a {.
#navMain> ul { : met un espace : #navMain > ul {.

C'est pour être plus CLAIR, mais aussi et surtout pour respecter l'ordre de la CASCADE (héritage,...).

**laurentSc** · 19/11/2017, 13h56

quand j'ai entendu ta réponse en allant manger, je me suis demandé qu'est-ce que j'avais encore fait de mal ; ça me change !
OK pour respecter l'ordre pour la cascade et je vais passer au 7.

**laurentSc** · 19/11/2017, 17h50

Voici la V7 : https://codepen.io/laurentsc/details/qVpMOe/

Code css :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
  box-sizing: border-box;
}
 
 
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
 #navMain li {
   position : relative;          width:100%;
}/* positionner tous les li */
 
/* ------------------------------- */
/* fleche, avec rotation */
#navMain li.hasSub:after  {
  position: absolute;
  content: "\25BC";
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
 
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
 
#navMain li.hasSub:hover:after {
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  color: yellow;
}
 
#navMain ul li > ul {
  display:none;/* menu niveau 2 caché */
}
#navMain ul li:hover > ul {
  display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
}
 
#navMain a {
  display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
  padding:10px;
  font-family:Arial, sans-serif;
  color: #fff;
  background: #2980b9;
  text-decoration: none; /* ne pas souligner les liens */
}
 
#navMain a:hover {
  background: #20638f; /*change la couleur de fond*/
}
 
 
 
 
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles  */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
@media screen and (min-width: 641px) 
{
  #navMain > ul {/* slt niveau 1 */
    display:table; /* se comporte comme une table */
    width:50%; /* largeur du menu */
    min-width:640px; /* largeur mini du menu */
    margin:0 auto; /* menu centré dans son parent */
  }
  #navMain > ul > li { 
    display:table-cell; /* se comporte comme une cellule de table */
    width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
  }
  #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
    width:100%;  
  }
 
 
 
  /*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul > li > ul > li > ul {
    position : absolute;
    left:100%;/*SOUS-SOUS-MENU à droite*/
    top:0; 
	}
 #navMain > ul > li:nth-last-child(2) > ul > li > ul, /*avant-dernier*/
  #navMain > ul > li:last-child > ul > li > ul { 
    position : absolute; width:100%;
    left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
    top:0;
	}
 
  #navMain > ul > li:nth-last-child(2) ul li.hasSub:hover:after, /*avant-dernier*/
  #navMain > ul > li:last-child ul li.hasSub:hover:after,
  #navMain ul ul li.hasSub:hover:after {
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
 
  #navMain > ul > li:nth-last-child(2) ul li.hasSub:after, /*avant-dernier*/
  #navMain > ul > li:last-child ul li.hasSub:after,
  #navMain ul ul li.hasSub:after {
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}  
}
/* ------------------------------------------------------ */

J'ai identifié les lignes à récupérer ! Néanmoins pour que ça soit utile, il faut que je comprenne ; or, il y a 2 lignes, bien que visiblement nécessaires, que je ne comprend pas : les lignes 109 et 119.
Signification selon moi de #navMain ul ul li : les éléments (li) de liste dont un ancêtre est une liste qui a elle-même pour ancêtre l'élément d'identifiant navMain, soit les li de niveau 2 ou plus. D'abord, est-ce bien ça et de plus pouquoi la ligne 109 ne peut-elle remplacer les lignes 107 à 109 et la ligne 119 les lignes 117 à 119 ?

Invité · 19/11/2017, 18h20

Je répète : les copier-coller ne t'apprendront rien.
D'autant que mon code est plus complet - et complexe - que les exercices demandés.

ECRIS toi-même chaque ligne de code...
Et contente-toi de faire ce qui est demandé dans chaque exercice.
Ni plus, ni moins.

Et si tu ne comprends pas une ligne.... ne l'écris pas !

**laurentSc** · 19/11/2017, 22h50

Voici la V7.2 : https://codepen.io/laurentsc/pen/BmJEQZ/

Code css :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
  box-sizing: border-box;
}
 
 
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
 #navMain li {
   position : relative;          width:100%;
}/* positionner tous les li */
 
/* ------------------------------- */
/* fleche, avec rotation */
#navMain li.hasSub:after  {
  position: absolute;
  content: "\25BC";
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
 
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
 
#navMain li.hasSub:hover:after {
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  color: yellow;
}
/* pour tous les liens */
 
#navMain ul li > ul {
  display:none;/* menu niveau 2 caché */
}
#navMain ul li:hover > ul {
  display:block;/* si on survole un élément de niveau 1 du menu, on affiche le menu de niveau 2 */
}
 
#navMain a {
  display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
  padding:10px;
  font-family:Arial, sans-serif;
  color: #fff;
  background: #2980b9;
  text-decoration: none; /* ne pas souligner les liens */
}
 
#navMain a:hover {
  background: #20638f; /*change la couleur de fond*/
}
 
 
 
 
/* ------------------------------------------------------ */
/* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
/* on utilise les media queries pour modifier les styles  */
/* ------------------------------------------------------ */
/* MENU HORIZONTAL, centré - largeur 50% (mini : 640px) */
@media screen and (min-width: 641px) 
{
  #navMain > ul {/* slt niveau 1 */
    display:table; /* se comporte comme une table */
    width:50%; /* largeur du menu */
    min-width:640px; /* largeur mini du menu */
    margin:0 auto; /* menu centré dans son parent */
  }
  #navMain > ul > li { 
    display:table-cell; /* se comporte comme une cellule de table */
    width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
  }
  #navMain > ul > li ul {/* tous les ul 2e ou 3e niveau */
    width:100%;  
  }
 
/* gestion de la flèche */
  #navMain ul ul > li.hasSub:after,#navMain ul > li:last-child > ul > li.hasSub:hover:after,#navMain > ul > li:nth-last-child(2) > ul > li.hasSub:hover:after {
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  }
   #navMain ul ul > li.hasSub:hover:after,#navMain > ul > li:last-child > ul > li.hasSub:after,#navMain > ul > li:nth-last-child(2) > ul > li.hasSub:after {
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  } 
  /*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul > li > ul > li > ul {
    position : absolute;
    left:100%;/*SOUS-SOUS-MENU à droite*/
    top:0; 
	}
#navMain > ul > li:last-child > ul > li > ul { 
    position : absolute; width:100%;
    left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
    top:0;
	}
}
}
/* ------------------------------------------------------ */

Le code de gestion de la flèche (lignes 93 à 106) est plus simple que le tien (la preuve, je le comprend

encore heureux pour un code que j'ai écrit !)

Invité · 20/11/2017, 07h45

Ah enfin !

Tu écris ENFIN ton propre code !

C'est très bien.

Code css :

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

1
2
3
4
5
6
7
8
9
10
/* gestion de la flèche */
#navMain ul ul > li.hasSub:after,
#navMain ul > li:last-child > ul > li.hasSub:hover:after,
#navMain > ul > li:nth-last-child(2) > ul > li.hasSub:hover:after {
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

1- Du coup, tu vas pouvoir M'EXPLIQUER, clairement et précisément, à quoi servent ces lignes (= quels éléments elles CIBLENT) :

1a- #navMain ul ul > li.hasSub:after.
1b- #navMain ul > li:last-child > ul > li.hasSub:hover:after.
1c- #navMain > ul > li:nth-last-child(2) > ul > li.hasSub:hover:after.

ex. :

:after = (la flèche)
li.hasSub:after = (la flèche) du (li avec sous-menu)
li.hasSub:hover:after = (la flèche) du (li avec sous-menu) (au survol du li)

N.B. Ce qui m'intéresse le plus, c'est de savoir à quoi servent (= quels éléments elles CIBLENT) :

#navMain ul > li:last-child
#navMain > ul > li:nth-last-child(2)
et pourquoi a-t-on :hover sur les 2 dernières instructions (1b, 1c) et pas sur la première (1a) ?

2- Pour les flèches, suite à ta simplification du code :

as-tu remarqué un changement ?
Si oui, lequel ?
comment rétablir ce qui manque ?

3- Question subsidiaire :

si je veux que la flèche du sous-menu du menu "D" soit positionnée à DROITE de "D.2", que dois-je ajouter ?

4- Question plus simple (?)
Actuellement, tous les menus / sous-menus ont la même couleurs de fond (bleu).
Que dois-t-on ajouter pour que :

les sous-menus de niveau 2 aient un fond gris #333
les sous-menus de niveau 3 (et suivants) aient un fond gris #444

?

@JefReb : si tu veux participer...

**JefReb** · 20/11/2017, 10h03

Merci de m'invité. J'ai peu de temps aujourd'hui, mais voici ce que je trouve.
:last-child et nth-last-child(2) n'apportent rien.
Il suffit de mettre:

Code css :

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

1
2
3
4
5
6
7
8
9
10
#navMain ul ul > li.hasSub::after,
#navMain ul > ul > li.hasSub:hover::after  {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#navMain ul ul > li.hasSub:hover::after, 
#navMain ul > ul > li.hasSub::after   {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

Pour la position à droite de D2 je ne vois pas trop du moins rapidement sauf:

Code css :

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

1
2
3
#navMain > ul > li:last-child li.hasSub::after {
	right:80%;	/* A droite de D2 */
}

Il y a un problème de fuite du sous-niveau 3 A.2.1 et A.2.2
Il faut:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
/* Position sous-menu niveau 2*/
nav > ul ul {
	position: absolute; 			 
	top: 100%; 						
	left: 0; 							
}
/* Position sous-menu niveau 3*/
nav > ul ul ul {			
	top: 0;						
	left: 100%; 					
}

Pour les couleur des sous-menu 2 et 3:

Code css :

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
 
/* simple */
#navMain li li a {
	background:#333;
}
#navMain li li li a {
	background:#444;
}
/* ou compliqué */
#navMain li > ul > li a {
	background:#333;
}
voili voilou ...
#navMain li > ul ul > li a {
	background:#444;
}

Invité · 20/11/2017, 11h01

Merci JefReb pour ta participation

On va attendre la réponse de laurentSc...

Néanmoins :

1- :last-child : tu n'as pas vu ce que ça change ? avec / sans ? regarde mieux...
:nth-last-child(2) : j'y reviendrai plus tard

2- right:80%; : on peut mieux faire !
3- on va TOUJOURS prendre la solution LA PLUS SIMPLE.

**JefReb** · 20/11/2017, 13h54

Effectivement, j'ai zappé faute de temps le petit triangle à l'horizontal et le cumule de 90° + 90° et le retournement à 180°
Toutefois, si l'on veut que le code soit correcte pour un menu de 4 li avec 2 sous-menus chacun, il faut cibler aussi l'avant dernier. Sinon il part sur la droite.
Donc il faut remplacer:

Code css :

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

1
2
3
4
5
6
7
 
#navMain > ul > li:last-child > ul > li > ul {
	position : absolute;
	width: 100%;
	left: -100%; /*dernier SOUS-SOUS-MENU à gauche*/
	top: 0;
}

Par:

Code css :

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

1
2
3
4
5
6
7
#navMain > ul > li:last-child > ul > li > ul,
#navMain > ul > li:nth-last-child(2) > ul > li > ul {
	position : absolute;
	width: 100%;
	left: -100%; /*dernier SOUS-SOUS-MENU à gauche*/
	top: 0;
}

pour:

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<nav id="navMain">
  <ul>
    <li class="active hasSub"><!-- active : menu EN COURS --> 
      <a href="#">A - One</a>
      <ul>
        <li><a href="#">A.1</a></li>
        <li class="hasSub"><a href="#">A.2</a>
          <ul>
            <li><a href="#">A.2.1</a></li>
            <li><a href="#">A.2.2</a></li>
          </ul>
        </li>
        <li><a href="#">A.3</a></li>
      </ul>
    </li>
    <li class="hasSub" > <a href="#">B - Two</a>
      <ul>
        <li><a href="#">B.1</a></li>
        <li><a href="#">B.2</a></li>
      </ul>
    </li>
    <li class="hasSub"> <a href="#">C - Three</a>
      <ul>
        <li class="hasSub"><a href="#">C.1</a>
          <ul>
            <li ><a href="#">C.1.1</a></li>
            <li><a href="#">C.1.2</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="#">C.2</a>
          <ul>
            <li ><a href="#">C.2.1</a></li>
            <li><a href="#">C.2.2</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="#">D.3</a>
          <ul>
            <li ><a href="#">C.3.1</a></li>
            <li><a href="#">C.3.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="hasSub"> <a href="#">D - Four</a>
      <ul>
        <li class="hasSub"><a href="#">D.1</a>
          <ul>
            <li ><a href="#">D.1.1</a></li>
            <li><a href="#">D.1.2</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="#">D.2</a>
          <ul>
            <li ><a href="#">D.2.1</a></li>
            <li><a href="#">D.2.2</a></li>
          </ul>
        </li>
        <li class="hasSub"><a href="#">D.3</a>
          <ul>
            <li ><a href="#">D.3.1</a></li>
            <li><a href="#">D.3.2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Mais il est vrai qu'intellectuellement, c'est quand même un défi intéressant et pas toujours bien compris ...
mais je reste persuadé qu'on doit pouvoir simplifier encore pas mal.

Invité · 20/11/2017, 15h06

Hello JefReb,

si le défi t’intéresse, je t'invite à réaliser CHAQUE EXERCICE, et à créer UN codepen PAR exercice.

Le défi ?

Proposer le code le plus OPTIMISE * ** (= LEGER et SIMPLE) possible pour CHAQUE EXERCICE !
Le HTML et le CSS ne doivent comporter QUE le code nécessaire à l'exercice en cours.

-> Envoie-moi les liens de tes codepen en MP (car laurentSc a la fâcheuse tendance à copier-coller ! )

* Plusieurs solutions sont possibles, mais on reste dans l'optique "mobile first".
**(Note à LaurentSc)
Inutile de copier-coller mon propre code : il n'est pas optimisé !

Menu multi-niveaux - flex

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager