Menu multi-niveaux - flex

Invité · 15/11/2017, 11h45

Bonjour JefReb,

C'est bien ça : au cas où il y aurait plusieurs balises <nav> dans la page, ce qui peut très bien arriver.
Un id étant unique, là on est sûr de cibler le bon <nav>.

L'élément HTML <nav> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page.
Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).

ce n'est donc pas forcément un "menu".

N.B. Si tu veux suivre la discussion et faire les exercices, tu es le bienvenu !
Poste tes solutions.

**laurentSc** · 15/11/2017, 16h22

Argh ! J'ai "modifié" ton message par erreur !!

Codepen Exercice 5 : https://codepen.io/laurentsc/pen/vWmpZb/

Pas trop dur d'ajouter les flèches vu que tu l'as déjà fait !

Au fait le box-sizing: border-box; appliqué à tous les éléments html, je l'avais déjà rajouté, ayant vu qu'on le faisait généralement.

Une question néanmoins pour le positionnement de la flèche : elle est en absolute..........

désolé...
jreaux62

Invité · 15/11/2017, 16h43

Argh ! J'ai "modifié" ton message par erreur !!

Bonjour Laurent,

Pas trop dur d'ajouter les flèches vu que tu l'as déjà fait !

J'espère que tu ne t'es pas contenté d'un copier-coller

QUESTION(s) :

à quel(s) navigateur(s) correspond : "-o-transform:....." ?
à quel(s) navigateur(s) correspond : "-moz-transform::....." ?
à quel(s) navigateur(s) correspond : "-webkit-transform::....." ?

Si je veux changer la couleur de la flèche en yellow sur le :hover, je dois rajouter quoi, et où ?

Au fait le box-sizing: border-box; appliqué à tous les éléments html, je l'avais déjà rajouté, ayant vu qu'on le faisait généralement.

Ce n'est pas parce qu'"on le faisait généralement" !
Il faut comprendre pourquoi :

box-sizing : border-box;

border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur.
Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire.
Cela permet généralement de simplifier le dimensionnement des éléments *.

* on n'a plus besoin de prendre en compte le margin ni le border dans le calcul de la largeur

Une question néanmoins pour le positionnement de la flèche : elle est en absolute..........

Oui, mais son parent, par rapport auquel elle doit être positionnée, c'est le <li>, pas le <ul> !
Il faut donc que le <li> parent soit positionné (en relative, ici)

**laurentSc** · 15/11/2017, 17h55

• -o- pour Opera
• -moz- pour Gecko (Mozilla)
• -webkit- pour Webkit (Chrome, Safari, Android...)
• -ms- pour Microsoft (Internet Explorer)
• -khtml- pour KHTML (Konqueror)

mais je le savais déjà !

J'espère que tu ne t'es pas contenté d'un copier-coller

non, j'ai cherché à comprendre le code (d'où par exemple ma question sur le positionnement) et de même voyant que ça changeait rien, j'ai commenté

Code :

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

/*cursor: pointer;*/

Le box-sizing, j'avais déjà regardé ce que ça fait.

•Si je veux changer la couleur de la flèche en yellow sur le :hover, je dois rajouter quoi, et où ?

color: yellow; dans #navMain li.hasSub:hover:after

Oui, mais son parent, par rapport auquel elle doit être positionnée, c'est le <li>, pas le <ul> !

Ca, ça mérite un éclaircissement : la classe agit sur le <li> (<li class="active hasSub">). Pour moi, son parent était donc le parent du <li> donc le <ul> : j'ai faux ?
De plus, tu dis qu'on met le <li> en relative (ce que tu avais fait). Mais si je ne le fais pas, ça marche quand même. Pourquoi ?

Invité · 15/11/2017, 18h19

Envoyé par laurentSc

...Mais si je ne le fais pas, ça marche quand même. Pourquoi ?

ajoutons un margin-top au menu complet :

Code :

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

1
2
3
 
#navMain { margin-top:100px; } /* on écarte le menu du haut de la page */
body { background:#666; } /* pour visualiser ce qui se passe */

Regarde ce qui se passe :

SANS position:relative; sur le <li>
AVEC

Code css :

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

1
2
3
  #navMain > ul > li { 
   position : relative; /* teste AVEC ou SANS */
  }

-> où se trouvent les flèches ?
-> quelle largeur font les sous-menus ?

REPONSE :

SANS, les flèches se trouvent calées tout en haut à droite, et les sous-menus font 100%.... de la largeur de la fenêtre !
CAR c'est le <body> qui est alors le PLUS PROCHE parent POSITIONNE.

position:relative; sur le <li> permet de définir le <li> comme le PLUS PROCHE parent POSITIONNE !
Les élements enfants se positionnent alors PAR RAPPORT à lui.

**laurentSc** · 15/11/2017, 19h23

y a sûrement un schmilblick car si je commente le positionnement, les flèches sont bien calées en haut à droite mais la largeur des sous-menus ne change pas...

https://codepen.io/laurentsc/pen/vWmpZb/

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;
}
 
#navMain { margin-top:100px; } /* on écarte le menu du haut de la page */
body { background:#666; } /* pour visualiser ce qui se passe */
 
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
 
/*#navMain > ul > li {position:relative;}*/
 
/* ------------------------------- */
/* fleche, avec rotation */
#navMain li.hasSub:after {
  position: absolute;
  content: "\25BC";
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
  /*cursor: pointer;*/
 
  -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*/
}
 
/* ------------------------------------------------------ */
/* PHONE (largeur de fenetre inférieure à 640px) */
/* "MOBILE FIRST" : on définit d'abord les styles pour PHONE */
/* ------------------------------------------------------ */
/* MENU VERTICAL - largeur 100% */
 @media screen and (max-width:640px) {
   #navMain > ul {
     width:10%;  min-width:100px;
   }
}
 
 
/* ------------------------------------------------------ */
/* 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 */
   /*position :relative;*/
  }
  #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 */
   /*position : relative;*/
  }
  #navMain > ul > li > ul {
 
    /*position : absolute;*/
    width:100%;
    min-width:100px;
  }
}
/* ------------------------------------------------------ */

Tu comprends pourquoi ?

Invité · 15/11/2017, 19h57

Oui.
Tu as enlevé aussi le position:absolute sur le il du sous-menu...

**laurentSc** · 15/11/2017, 20h05

Demain je passe au 6

EDIT : l'objectif est évidemment d'intégrer ce menu dans un site. Or, j'avais tenté l'intégration du menu avec flex et ça ne marchait pas : très probablement un conflit entre règles CSS, mais je ne savais pas lesquelles. Donc à chaque étape, je teste l'intégration du nouveau menu ; pour l'instant c'est OK. Si à un moment ça ne va plus, il sera plus facile de trouver la cause.

Invité · 15/11/2017, 20h52

NON.

L'objectif est que tu COMPRENNES bien à quoi sert chaque instruction !

Ensuite seulement tu SAURAS faire ce que tu veux.

**laurentSc** · 15/11/2017, 20h57

En fait on est d'accord car oui je comprends le code du menu et donc s'il se présente un problème bien plus facile de le résoudre

**laurentSc** · 16/11/2017, 11h25

Je me suis mis sur la V6 : https://codepen.io/laurentsc/pen/XzeZVz/

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
<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><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>
      <a href="#">C - Three</a>     
      </li>
      <li>
        <a href="#">D - Four</a>
              <ul>
                <li><a href="#">D.1</a></li>
                <li><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><a href="#">D.3</a></li>
      </ul>
      </li>
 
  </ul>
</nav>

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
 
/* 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 > ul > li {position:relative;}*/
 
/* ------------------------------- */
/* fleche, avec rotation */
#navMain li.hasSub:after {
  position: absolute;
  content: "\25BC";
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
  /*cursor: pointer;*/
 
  -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*/
}
 
/* ------------------------------------------------------ */
/* PHONE (largeur de fenetre inférieure à 640px) */
/* "MOBILE FIRST" : on définit d'abord les styles pour PHONE */
/* ------------------------------------------------------ */
/* MENU VERTICAL - largeur 100% */
 @media screen and (max-width:640px) {
   #navMain > ul {
     width:10%;  min-width:100px;
   }
}
 
 
/* ------------------------------------------------------ */
/* 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 */
   /*position :relative;*/
  }
  #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 */
   position : relative;
  }
  #navMain > ul > li > ul {
 
    position : absolute;
    width:100%;
    z-index:1;
  }
 
  #navMain > ul > li > ul > li { position : relative; width:100%;
	z-index:1; }
 
  /*SPECIAL : SOUS-SOUS-MENU à droite*/
#navMain > ul > li > ul > li > ul { position : absolute; width:100%;
    left:100%;/*SOUS-SOUS-MENU à droite*/
    top:0; 
	z-index:1; }
#navMain > ul > li:last-child > ul > li > ul { position : absolute; width:100%;
    left:-100%; /*dernier SOUS-SOUS-MENU à gauche*/
    top:0;
	z-index:1; }
}
}
/* ------------------------------------------------------ */

Je me suis dit que en desktop le parent de #navMain > ul > li > ul > li > ul (donc #navMain > ul > li > ul > li) devait être positionné pour que top:0; se réfère à lui. Ce que je ne comprend pas, c'est pourquoi il faut le mettre en relative et pas en absolute ? (en gros on change le positionnement de l'enfant et du parent : relative->absolute ou absolute->relative)

Invité · 16/11/2017, 11h41

bonjour Laurent,

ton code à l'air de fonctionner !

Je vois mal ce que tu ne comprends pas.
C'est pourtant simple :

un élément est positionné par rapport à son plus proche parent, lui-même positionné.

Que le parent soit positionné en relative, absolute ou fixed va dépendre du contexte lié à cet élément, indépendamment de ses enfants.

Si ça ne suffit pas, FAIS DES ESSAIS, en changeant relative en absolute ou fixed, et REGARDE ce qui se passe.

N.B. DANS LE CAS GENERAL, on peut mettre les ul et li en position:relative; : le comportement sera NORMAL (= celui PAR DEFAUT).

Code css :

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

1
2
3
ul, li {
  position:relative;
}

absolute ou fixed sont des cas PARTICULIERS, car ces éléments SORTENT alors du flux.
Il est alors nécessaire de les positionner (position:, top:, left:,...) et de les dimensionner (width:100%; .....)

**laurentSc** · 16/11/2017, 11h50

Ce que je ne comprend pas c'est pourquoi
Il fallait mettre le li en relative car en absolute ça ne marchait pas...

Invité · 16/11/2017, 11h54

Ceci étant dit (et compris ??), voici un petit supplément :

Tu as écrit :

Code :

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

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

Comment ferais-tu pour SIMPLIFIER l'écriture ?
En clair : comment REDUIRE la quantité de code ?

(et globalement, tu as déjà beaucoup trop de code redondant...)

Indice : le "C" de "CSS" signifie "en Cascade".

N.B. Et enlève les z-index:1; partout !
ça ne sert à rien (pour l'instant) !
D'autant qu'UN SEUL suffit... bien placé.

Invité · 16/11/2017, 12h07

[EDIT] PAR CONTRE, Laurent,

Je constate que dans "TON" code, tu t'es ENCORE contenté de COPIER-COLLER MON CODE !!!

Code :

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

1
2
3
 /*SPECIAL : SOUS-SOUS-MENU à droite*/
.....
    left: 100%; /*SOUS-SOUS-MENU à droite*/

JE RECONNAIS MON ECRITURE !!!!

Comment veux-tu PROGRESSER si tu ne fais AUCUN effort personnel ?...

**laurentSc** · 16/11/2017, 14h41

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 car ce qui fonctionnait en flex ne suffisait pas en display:table...

maintenant je répond au post #74 : OK pour avoir écrit ça. J'ai donc pensé que vu le concept d'héritage en CSS, on pouvait supprimer le position : absolute; width:100%; de la ligne 10. Mais il n'en est rien : si je supprime le positionnement, du coup le top:0; de #navMain > ul > li > ul > li > ul se réfère à #navMain > ul > li > ul et plus à #navMain > ul > li > ul > li et si je supprime le width:100%; le sous-sous-menu ne fait plus la largeur du li mais est tout petit

Pourquoi ?

Invité · 16/11/2017, 14h56

Comme tu l'as écrit toi-même : ".....li > ul....." cible le ul, enfant direct.

Mais quand on l'enlève, on cible tous les enfants, quel que soit le niveau.

Donc.... on peut écrire :

d'une part les instructions "générales" avec .....li ul..... { ... }
d'autre part les instructions "spécifiques" avec .....li > ul..... { ... }

**laurentSc** · 16/11/2017, 15h14

Je suis content car je viens de trouver la simplification :

Code css :

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

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

et avant de passer à l'exercice 7, on vient de me parler (au boulot) d'un problème urgent donc je switche temporairement...

**JefReb** · 17/11/2017, 09h20

Ne serait-ce pas plus simple comme cela?

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#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;  
  }

Invité · 17/11/2017, 09h38

Bonjour JefReb,
merci d'intervenir !

Ce n'est pas (tout-à-fait) faux, mais il ne faut pas aller trop vite avec laurenSc

Code css :

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

1
2
3
4
#navMain > ul ul { /* niveau 2 et SUIVANTS */
...
#navMain > ul  ul  ul { /* niveau 3 et SUIVANTS */
...

dans le contexte actuel, tu as raison, car on n'a que DEUX niveaux* (niveau 2 et niveau 3) de sous-menu (le niveau 1 étant le menu principal).

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.

*Pour moi, c'est LARGEMENT suffisant !
En ajouter encore un serait anti-ergonomique (trop d'action :hover avant d'y parvenir)

N.B. De plus, en écrivant "ul ul", tu "sautes" le li intermédiaire, et je ne suis pas sûr que Laurent le comprenne du 1er coup...

Ca, c'est pour plus tard...

Menu multi-niveaux - flex

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager