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 :
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.
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; }
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 ?
Bonjour Jreaux62,
J'ai été intrigué par ton affirmation:J'ai donc voulu tester le code que j'avais soumis et mettant jusqu'à 5 sous-niveaux.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.
Mais je suis d'accord avec toi,et j'ajouterais, insupportable.*Pour moi, c'est LARGEMENT suffisant !
En ajouter encore un serait anti-ergonomique
Maisfonctionne parfaitement.
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; }
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
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 :
Dernière modification par Invité ; 18/11/2017 à 15h24.
Exact!
Rien à ajouter. Merci.
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
- ...
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
Dernière modification par Invité ; 19/11/2017 à 09h12.
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/
La correction apportée se situe aux lignes 72 à 75
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; } } } /* ------------------------------------------------------ */
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...
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,...).
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.
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 ?
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 !
Voici la V7.2 : https://codepen.io/laurentsc/pen/BmJEQZ/
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 !)
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; } } } /* ------------------------------------------------------ */
Ah enfin !
Tu écris ENFIN ton propre code !
C'est très bien.
1- Du coup, tu vas pouvoir M'EXPLIQUER, clairement et précisément, à quoi servent ces lignes (= quels éléments elles CIBLENT) :
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); }
- 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...
Dernière modification par Invité ; 20/11/2017 à 08h06.
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:
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
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); }
Il y a un problème de fuite du sous-niveau 3 A.2.1 et A.2.2
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 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; }
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.
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:
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 { position : absolute; width: 100%; left: -100%; /*dernier SOUS-SOUS-MENU à gauche*/ top: 0; }
pour:
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; }
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.
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é !
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager