Menu multi-niveaux - flex

**laurentSc** · 11/11/2017, 22h06

Je comprend tout du code et pourquoi y en avait en trop : https://codepen.io/laurentsc/pen/XzMvba/

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
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0;/* marge extérieure */
  padding: 0;/* marge intérieure */
  border: 0;
}
/* ------------------------------- */
/* MENU */
 
#navMain a {
  text-decoration: none;/* ne pas souligner */
}
#navMain ul {
  display:table;
}
 
/* -------------- */
/* MENU : niveau 1 *//* #navMain > ul : on ne pointe que sur les ul directement enfants de #navMain (contrairement à #navMain ul qui désigne tous les ul sous #navMain quelque soit le niveau) */
#navMain > ul > li > a {
  background: #2980b9;
}
/* --------------- */
/* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
#navMain > ul > li.active > a {
  background: #20638f;
}
 
#navMain ul li a {
  display: block;
  color: #fff;
  padding: 10px 10px;/* marge intérieure du menu Horiz Vert*/
}
 
/* media queries */
/*@media screen and (max-width: 640px) {
#navMain > ul > li { width:100%; }
#navMain ul{ margin:0;}/* si menu vertical, le coller à gauche 
}*/
 
@media screen and (min-width: 641px) {
  #navMain ul {
  width:50%;/* largeur du menu */
}
#navMain > ul > li { display:table-cell; width:10%; }
#navMain ul{margin:auto;}/* si menu horiz le centrer */
min-width:640px;
}

Tout à l'heure j'avais commencé la V4 en codepen et tout perdu (je sais pas trop comment). J'avais fait des sauvegardes, mais pas de l'URL...

Et comme demain, lever à 6h30, fini pour ce soir (et pas là demain matin). Je referai la V4 demain après-midi (du moins j'essaierai car avant de tout perdre, j'avais des difficultés ; le hover ne marchait pas).

Invité · 12/11/2017, 09h55

Bonjour Laurent,

SOLUTION pour l'Exercice 3 (afin que tu continues sur une bonne base de travail) :

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
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
}
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
/* 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 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% */
 
/* Ici, RIEN à mettre : c'est le comportement normal des balises ! */
 
/* ------------------------------------------------------ */
/* 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 { /* ul 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 */
  }
}
/* ------------------------------------------------------ */

**laurentSc** · 12/11/2017, 21h51

Aujourd'hui très peu de temps à consacrer au menu

Néanmoins les exercices 1 à 10, je préfère nettement à ton post #29 (bien plus formateur).
Je n'ai pu m'y mettre aujourd'hui qu'à 21h et en partant de la base corrigée de l'exercice 3, j'ai tenté l'exercice 4 : https://codepen.io/laurentsc/details/vWmpZb/

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
<nav id="navMain">
  <ul>
    <li class="active"><!-- active : menu EN COURS -->
      <a href="#">A - One</a>
      <ul>
        <li><a href="#">A.1</a></li>
        <li><a href="#">A.2</a></li>
      </ul>
    </li>
    <li >
      <a href="#">B - Two</a>    
    </li>
    <li>
      <a href="#">C - Three</a>     
      </li>
      <li>
        <a href="#">D - Four</a>
      </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
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
}
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
/* 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 { max-width:100%; }
}
 
 
/* ------------------------------------------------------ */
/* 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 {
    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 */
  }
}
/* ------------------------------------------------------ */

Comme tu peux le constater si le comportement du menu vertical est correct, ce n'est pas le cas du menu horizontal sur hover. Pourquoi ?

Invité · 12/11/2017, 22h22

Hello,

Indice donné ici.

Important : un élément est positionné par rapport à son plus proche parent positionné aussi.

En clair : quand on met position:absolute; il faut mettre le parent en position:relative;

Invité · 12/11/2017, 22h32

À corriger dans le code (le tien et... le mien !!)

Remplacer :

Code :

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

1
2
3
  #navMain ul {
    display:table;
...

Par :

Code :

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

1
2
3
  #navMain > ul { /* uniquement enfant direct (niveau1) */
    display:table;
...

**laurentSc** · 13/11/2017, 15h49

OK hier, relu trop vite les consignes pour l'exercice 4.

J'ai corrigé mon codepen : https://codepen.io/laurentsc/details/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
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
}
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
/* 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{ max-width:100%;
   position:absolute;}
   navMain > ul > li { 
    position : relative;
   }
}
 
 
/* ------------------------------------------------------ */
/* 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 : absolute;
  }
}
/* ------------------------------------------------------ */

mais en mode horizontal, pas bon. Et pourquoi en desktop, sous-menu en absolute mais en phone relative ? Et d'ailleurs, je ne saisis pas pourquoi il faut les positionner...

Invité · 13/11/2017, 16h19

Envoyé par laurentSc

Et pourquoi en desktop, sous-menu en absolute mais en phone relative ? Et d'ailleurs, je ne saisis pas pourquoi il faut les positionner...

C'est tout l'intérêt de cet exercice !

Si je te dis tout, tu n'apprendras pas.
Donc, A TOI donc de... t'exercer et de TESTER !

CORRECTION de ton code V4 :

pour PHONE, RIEN A METTRE !! C'est le comportement NORMAL des balises : "menu vertical"
C'est pour ça que je te fais travailler sur DESKTOP : pour AJOUTER le CSS nécessaire et suffisant à son bon fonctionnement en tant que "menu horizontal (niveau 1)".

@media screen and (max-width:640px) { : PAS BESOIN ! On est en "mobile first", et en "comportement normal" !
#navMain > ul{ max-width:100%; position:absolute;} : NON PLUS ! (RIEN A METTRE POUR PHONE !)

DESKTOP : Où est le code nécessaire pour le SOUS-MENU ??
position : absolute; ne se met pas sur le <li>, mais sur le <ul> du sous-menu *

* Important : un élément est positionné par rapport à son plus proche parent positionné aussi.
En clair : quand on met position:absolute; il faut mettre le parent en position:relative;

N.B. Tu as le droit de regarder la version COMPLETE du code, pour y retrouver les bonnes instructions !

Allez ! Courage**...

**Je le dis autant pour toi que pour moi...

**laurentSc** · 13/11/2017, 21h57

Je pense avoir bien progressé mais il reste des points obscurs que je verrai demain.

N.B. Tu as le droit de regarder la version COMPLETE du code, pour y retrouver les bonnes instructions !

où ça, la version COMPLETE du code ?

Invité · 13/11/2017, 22h33

J'ai déjà donné un code fonctionnel (codepen).

**laurentSc** · 14/11/2017, 10h38

OK, d'ailleurs, j'ai déjà consulté ton codepen, simplement je n'avais pas percuté que le code complet, c'était ça...

Dans le post #47, tu dis de ne rien mettre pour le cas "phone", néanmoins au post #35, tu dis de mettre le sous-menu en position relative...alors ?

Ma V4 en est là : 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
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0; /* marge extérieure */
  padding: 0; /* marge intérieure */
  border: 0; /*bordure*/
}
 
/* ------------------------------------------------------ */
/* MENU - style général */
/* ------------------------------------------------------ */
#navMain ul, #navMain li {
  list-style: none; /* pas de style de liste (puces,...) */
}
/* 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:1%;
   }
   navMain > ul > li { 
     position : absolute
   }
     #navMain > ul > li > ul {
    position : relative;
  }
}
 
 
/* ------------------------------------------------------ */
/* 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 {/*position:absolute;*/}
  #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:180px;
  }
}
/* ------------------------------------------------------ */

Tu peux constater qu'en mode "desktop", le sous-menu s'affiche désormais correctement, par contre en "phone", je voudrais que le menu soit étroit (du genre 10% de la fenêtre), mais il occupe la largeur complète. Comment faire ?

Invité · 14/11/2017, 12h43

Envoyé par laurentSc

...par contre en "phone", je voudrais que le menu soit étroit (du genre 10% de la fenêtre)...

Ça ne fait pas partie de l'EXERCICE !!

Quand tu auras fait TOUS les EXERCICES, et TOUT bien compris, tu pourras personnaliser en fonction de TES besoins.

Cela dit, je vais répondre à ta question :
Dans ce cas, comme c'est une instruction SPÉCIFIQUE à PHONE (car ça ne concerne PAS DESKTOP), il faut ajouter le media query pour "PHONE" :

Code css :

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

1
2
3
4
5
6
 
/* UNIQUEMENT SUR PHONE */
@media screen and (max-width: 640px) 
{
 #navMain > ul { width:10%;  min-width:120px; } /*niveau 1*/
}

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

J'avais déjà fait ça (lignes 38 à 41), sans le min-width, mais ça n'arrange rien (même avec un width à 10%)...

Tu ne réponds pas à cette question :

Dans le post #47, tu dis de ne rien mettre pour le cas "phone", néanmoins au post #35, tu dis de mettre le sous-menu en position relative...alors ?

EDIT : dommage que le post #1 ne soit pas modifiable par moi car le titre ne va plus du tout...

Invité · 14/11/2017, 14h05

Code :

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

   navMain > ul {

Rien ne te choque ?

Et non, je ne répondrais pas. LIS la documentation et TESTE toi-meme.

Glossaire des propriétés CSS

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

OK, j'avais pas remarqué mon bug...

Et dans le lien à lire que tu me donnes, c'est quelle partie qu'il faut regarder (car pas trouvé) ?

Invité · 14/11/2017, 16h40

Tu te fous quand même un peu du monde.....

CHERCHE !!

VI. Propriétés d'affichage et de positionnement

Il existe aussi la FAQ CSS !

Comment positionner un élément en absolute ?

Si je dois faire TOUT LE BOULOT A TA PLACE, quel est l'INTERET ??

**laurentSc** · 14/11/2017, 17h00

Ce n'est pas du foutage du monde (d'ailleurs, j'avais bien vu les 2 liens que tu indiques), mais je n'ai pas trouvé de réponse au point comme quoi tu avais dit de ne rien mettre pour le phone (post #35), puis que tu avais dit de positionner le sous-menu (post #47)

Invité · 14/11/2017, 17h08

Oublie ça...

**laurentSc** · 14/11/2017, 22h55

OK, je ne te lis que très tard

donc je passerai à l'exercice 5 demain...

Invité · 15/11/2017, 09h03

CORRECTION Exercice 4 :

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
/* 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,...) */
}
/* 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 a:hover {
  background: #20638f; /*change la couleur de fond*/
}
 
/* ------------------------------------------------------ */
/* on MASQUE les sous-menu - on AFFICHE sur :hover */
#navMain ul li > ul {
  display: none; /* sous-menu de niveau suivant caché */
}
#navMain ul li:hover > ul {
  display: block; /* si on survole un li, on affiche le sous-menu correspondant */
}
 
/* ------------------------------------------------------ */
/* 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) {
 
  /* RIEN ICI : comportement NORMAL des balises */
 
}
 
/* ------------------------------------------------------ */
/* 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 {
    /*position:absolute;*/
  }
  #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%; /* même largeur que son parent */
    min-width: 180px; /* largeur mini */
  }
}
/* ------------------------------------------------------ */

A NOTER :
J'ai remplacé :

Code css :

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

1
2
3
4
5
6
#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 */
}

par :

Code css :

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

1
2
3
4
5
6
7
8
/* ------------------------------------------------------ */
/* on MASQUE les sous-menu - on AFFICHE sur :hover */
#navMain ul li > ul {
  display: none; /* sous-menu de niveau suivant caché */
}
#navMain ul li:hover > ul {
  display: block; /* si on survole un li, on affiche le sous-menu correspondant */
}

De cette manière, on n'aura PAS de code à ajouter si on ajoute des sous-sous-niveaux supplémentaires.

(RAPPEL) Exercice 5 :

Ajouter une flèche au menu "A" (indice : :before ou :after, au choix), pointée vers le bas
:hover : la faire pointer vers le haut

**JefReb** · 15/11/2017, 11h21

Désolé de m'insérer dans ce post, mais je n'arrive pas à comprendre l'intérêt de cet id

Code html :

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

<nav id="navMain">

Je comprendrais à la rigueur si il y avait 2 menus dans la page, comme un horizontal et un vertical.
Mais avec un seul menu quel est ce besoin de compliquer avec l'ajout d'un id ou d'une classe?

Juste une question ...

Menu multi-niveaux - flex

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager