Menu multi-niveaux - flex

**laurentSc** · 03/11/2017, 18h57

Bonjour,

je souhaite utiliser un menu qu'a proposé jreaux62.

Mon souci est que mon site est en PHP, or son code fonctionne bien si l'extension est html mais le css n'est plus pris en compte, si je passe l'extension à php. Je teste le PHP avec Wampserver. (Dans ce code, pas de PHP du tout, mais comme je veux l'inclure dans des fichiers PHP, obligé de changer l'extension).

Le code (que du html et du CSS) :

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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
     <title></title>
	<style>
        * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ----------- MENU ----------- */
nav {
  position: relative;
}
nav ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav li {
  position: relative;
}
nav a {
  position: relative;
  display: block;
}
/* ------ MENU niveau 1 ------ */
nav > ul {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
nav > ul > li {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; /* menus qui s'adaptent en largeur*/
  /*-webkit-flex:1 1 25%; flex:1 1 25%;*/ /* 4 menus de meme largeur*/
}
/* --- MENU niveaux suivants --- */
nav > ul ul {
  position: absolute;
  width: 100%;
  top: 100%;
  z-index: 999;
  display: none; /* on masque */
  min-width: 120px;
}
/* ----------- hover ----------- */
nav li:hover > ul {
  display: block; /* on affiche */
}
nav li:hover {
  background: grey;
}
nav li:hover > a {
  color: white;
}
/* ----------- DECORATION ----------- */
nav li {
  background: #ccc;
}
nav li li {
  background: #bbb;
}
nav a {
  padding: 10px;
  text-decoration: none;
  color: #666;
  font-family: "Arial", sans-serif;
}
/* ----------- fleche ----------- */
li.hasSub:before {
  position: absolute;
  content: "\25bc";
  color: #999;
  bottom: 5px;
  right: 5px;
}
li.hasSub:hover:before {
  color: #fff;
}
/* --- MENU niveau 2 et suivants --- */
nav > ul ul {
  position: absolute;
  /*width: 100%;*/
  top: 100%; /* sous-menu DESSOUS */
  left:0;
  z-index: 999;
  display: none; /* on masque */
  min-width: 120px;
}
/* --- MENU niveaux 3 et suivants --- */
nav > ul ul ul {
  position: absolute;
  width: 100%;
  top: 0;
  left:100%; /* sous-menu A DROITE */
}
nav > ul > li:last-child ul ul { /* dernier li du 1er ul */
  position: absolute;
  width: 20%;
  top: 0;
  left:-34%; /* sous-menu A GAUCHE */
}
 
/* ----------- fleche ----------- */
li.hasSub:before {
  position: absolute;
  content: "\25bc";
  color: #999;
  bottom: 5px;
  right: 5px;
}
li.hasSub:hover:before {
  color: #fff;
}
nav > ul > li li.hasSub:before {
  content: "\25BA";
  bottom: 7px;
}
nav > ul > li:last-child li.hasSub:before {
  content: "\25C4";
  bottom: 7px;
}
        </style>
</head>
<body>
<nav id="menu">
  <ul>
    <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
      <ul>
        <li class="hasSub"><a href="javascript:void(0)">menu 1.1</a><ul><li><a href="#">menu 1.1.1</a></li><li><a href="#">menu 1.1.2</a></li></ul></li>
        <li><a href="#">menu 1.2</a></li>
        <li><a href="#">menu 1.3</a></li>
        <li><a href="#">menu 1.4</a></li>
      </ul>
    </li>
    <li class="hasSub"><a href="javascript:void(0)">ceci est le menu 2</a>
      <ul>
        <li><a href="#">menu 2.1</a></li>
        <li class="hasSub"><a href="javascript:void(0)">menu 2.2</a><ul><li><a href="#">menu 2.2.1</a></li><li><a href="#">menu 2.2.2</a></li></ul>
          <li><a href="#">menu 2.2.3</a></li></ul</li>
        <li><a href="#">menu 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">menu 3 sans sous-menu</a></li>
    <li class="hasSub"><a href="javascript:void(0)">enfin, voici un menu 4 un peu plus long</a>
      <ul>
        <li class="hasSub"><a href="javascript:void(0)">menu 4.1</a><ul><li><a href="#">menu 4.1.1</a></li><li><a href="#">menu 4.1.2</a></li></ul></li>
        <li><a href="#">menu 4.2</a></li>
      </ul>
    </li>
  </ul>
</nav>
 
<div>
 
    <p>bla bla 1</p>
 
    <p>bla bla 2</p>
</div>
 
</body>
</html>

Que faire pour que ça fonctionne ?

**laurentSc** · 03/11/2017, 21h24

Je me demande bien pourquoi n'ayant rien changé (et je suis en local donc on ne peut pas incriminer le serveur), mais le problème a disparu...

**laurentSc** · 03/11/2017, 22h58

C'est plus compliqué car ça marche bien avec Firefox mais incomplètement avec IE (certaines proprétés CSS comme le hover sont bien prises en compte, mais le menu de niveau 1 s'affiche en colonne et non en ligne...)

Invité · 04/11/2017, 07h13

Bonjour Laurent,

Ton PREMIER REFLEXE doit être de FAIRE UNE RECHERCHE, et LIRE LA DOC !!

PAS d'ouvrir une discussion pour un oui, pour un non.

Pour IE (<=10), il faut préfixer avec -ms-

flex (voir : compatibilité)
Utilisation de boîtes flexibles de CSS

**laurentSc** · 04/11/2017, 12h29

Bonjour,
je reconnais que j'ai pas eu le bon réflexe. Je viens néanmoins de rajouter le préfixe -ms- pour assurer la compatibilité :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/* ------ MENU niveau 1 ------ */
nav > ul {
  display: -webkit-flex;
  display: -ms-flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}
nav > ul > li {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto; /* menus qui s'adaptent en largeur*/
  /*-webkit-flex:1 1 25%; flex:1 1 25%;*/ /* 4 menus de meme largeur*/
}

et le problème reste (même après avoir vidé le cache) donc je pense que cette fois, la discussion est justifiée...

Invité · 04/11/2017, 13h17

Alors pour IE (quelle version ??), ajoute :

Code css :

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

1
2
3
nav > ul > li {
display:inline-block;
}

**laurentSc** · 04/11/2017, 16h49

Je mets un certain temps à répondre car je suis tombé sur un autre problème et j'ai cherché avant de répondre, mais je n'ai pas trouvé et ne suis pas en mesure de poser une question (en gros, c'est trop complexe pour poser une question claire).
Mais ta solution fonctionne ! (Ma version est la 11). Peux-tu m'expliquer pourquoi ?

Invité · 04/11/2017, 17h05

Lis la doc.

"css display"

**laurentSc** · 04/11/2017, 18h41

Dans ton lien (au départ, pas vu qu'il y en avait un ; juste compris "cherche"...), j'ai lu ça

L'élément génère une boîte pour un élément en bloc qui « s'écoule » dans le contenu environnant comme s'il était une boîte en ligne (le comportement obtenu est similaire à celui d'un élément remplacé).

Pas compris ce qu'était un élément remplacé mais assez passé de temps sur ce sujet.

**NoSmoking** · 05/11/2017, 12h05

Bonjour,

concernant l'utilisation de flex-box pour réaliser un menu et pour faire court, je dirais que si celui-ci est à un seul niveau il peut être intéressant effectivement d'utiliser les flex-box pour passer d'un affichage ligne -> colonne suivant la largeur d'affichage, ou encore de changer l'ordre des menus, mais si il s'agit de construire un menu à plusieurs niveaux, je n'en vois pas à priori l'intérêt par rapport à une présentation CSS classique qui à fait ses preuves depuis bien longtemps.

je souhaite utiliser un menu...

depuis le temps que tu nous parles de menu sur ce forum, plusieurs années, il me semblait que tu aurais réussi à pérenniser une structure et le CSS associé pour ne pas avoir à réinventer la roue à chaque fois, je me rencontre que non

!

Pas compris ce qu'était un élément remplacé mais assez passé de temps sur ce sujet.

tu devrais aller faire un tour sur cette page : Qu'est-ce qu'un élément remplacé ? et la lire.

**laurentSc** · 05/11/2017, 17h17

Tu as l'air pas d'accord avec jreaux62 vu que son menu utilise les flex boxes et est multi-niveaux...

il me semblait que tu aurais réussi à pérenniser une structure et le CSS associé pour ne pas avoir à réinventer la roue à chaque fois, je me rencontre que non

Je pensais aussi ne plus avoir à travailler sur ce sujet mais suis tombé sur une insatisfaction...

**NoSmoking** · 07/11/2017, 10h12

Tu as l'air pas d'accord avec jreaux62 ...

Là tu tires une conclusion hâtive, flex-box apporte son lot de solution rapide de mise en forme comme je l'ai indiqué mais concernant ce menu il existe, pour le même rendu, le modèle de position table.

Attention je ne parle pas de l'élément HTML <table> mais du modèle de rendu display: table-xxx qui est reconnu, unanimement, depuis IE8 soit près de 10 ans.

Le même rendu est obtenu simplement avec le CSS minimaliste suivant

Code :

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

1
2
3
4
#menu li {
  display: table-cell;
  width: 1%;
}

c'est tout rien de plus si ce n'est que la width force la même largeur un peu comme le fait flex-grow.

Exemple simple :

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu avec table-cell</title>
<meta name="Author" content="NoSmoking">
<style>
#menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#menu li {
  display: table-cell;
  width: 1%;
}
#menu li +li {
  border-left: 1px solid #abc;
}
#menu a {
  display: block;
  text-align: center;
  line-height: 2em;
}
#menu li:hover {
  background: #cde;
}
</style>
</head>
<body>
  <h1>Menu avec <code>display:table-cell</code></h1>
  <ul id="menu">
    <li><a href="#">Menu #1</a></li>
    <li><a href="#">Menu #2</a></li>
    <li><a href="#">Menu #3</a></li>
    <li><a href="#">Menu #4</a></li>
  </ul>
</body>
</html>

Invité · 07/11/2017, 11h11

Je suis d'accord avec NoSmoking

Et en effet, j'utilise flex, car ce même menu sert AUSSI sur smartphone, où je le passe alors en vertical (via les media queries) !
ex. :

https://codepen.io/jreaux62/pen/dPxKKQ
https://codepen.io/jreaux62/pen/eedRwL (variante, avec sous-sous-menu s'ouvrant sur le coté)

Comme je t'ai dit :

à toi de te faire ta propre opinion,
de TESTER différentes solutions,
et d'adapter en fonction de chaque cas particulier.

**laurentSc** · 07/11/2017, 14h42

Ouh là, ça, c'est pas du code de ****** !

Les smartphones ne faisant pas partie de ma cible, je pense plutôt m'investir sur le code simpliste de No Smoking (je savais que la mise en page n'utilise plus les balises html <table> depuis une dizaine d'années). Cela dit, difficulté pour y ajouter des sous-menus (qui n'apparaîtraient qu'au survol (hover) et non sur click comme dans tes exemples).
Voici le code modifié sauf que le sous-menu n'apparaît pas au survol : pourquoi ? (contrairement à ce que tu crois, même si je pêche parfois par feignantise, je préfère quand même comprendre (et donc apprendre))

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Menu avec table-cell</title>
<meta name="Author" content="LaurentSc">
<style>
#menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
 
#menu li {
list-style-type: none;
}
}
#menu ul>li {
        display:none;
}
#menu ul >li:hover {
        display:block;
} 
#menu > li {
  display: table-cell;
  width: 1%;
}
#menu li +li {
  border-left: 1px solid #abc;
}
#menu a {
  display: block;
  text-align: center;
  line-height: 2em;
}
#menu li:hover {
  background: #cde;
}
</style>
</head>
<body>
  <h1>Menu avec <code>display:table-cell</code></h1>
  <ul id="menu">
    <li><a href="#">Menu #1</a>
		<ul>
			<li><a href="#">Menu #1.1</a></li>
			<li><a href="#">Menu #1.2</a></li>
 
		</ul>
	</li>
    <li><a href="#">Menu #2</a></li>
    <li><a href="#">Menu #3</a></li>
    <li><a href="#">Menu #4</a></li>
  </ul>
</body>
</html>

Selon moi #menu ul>li pointe sur les li enfants directs d'un ul enfant de menu...

Invité · 07/11/2017, 15h07

Voici un menu multi-niveaux sans jQuery - full CSS :

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

display:flex ou display:table, c'est juste un CHOIX à faire. TON choix...

N.B. Sans jQuery, , on doit ajouter dans le HTML :

1- pour afficher les flèches* des menus avec sous-menus
2- pour désactiver les liens* des menus avec sous-menus

Code :

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

<li class="hasSub"><a href="javascript:void(0)">...

*(ce que faisait automatiquement le script jQuery)

N.B. On peut constater dans mon exemple qu'il ne faut pas dépasser 3 niveaux MAXIMUM !
Sinon, ça devient fastidieux de naviguer :

on ne sait plus où placer les niveaux suivants !
ils deviennent difficiles à atteindre (trop de clics, et/ou difficiles à cliquer)

Et c'est souvent signe d'une mauvaise conception.

**laurentSc** · 07/11/2017, 15h40

Merci...mais c'est trop simple !

Ca se comporte exactement comme je voudrais (même sûrement mieux car j'ai pas testé le côté responsive), mais je préfèrerais un code que je maîtrise, donc pourrais-tu me dire ce qui n'est pas bon dans mon code du post #14 ?

Invité · 07/11/2017, 15h57

Toi.

SERIEUSEMENT...
j'ai mis des commentaires dans le code CSS...

->

REPRENDS-LE depuis le début = SANS CSS du tout !
puis, ajoute CHAQUE instruction, UNE à la FOIS.
Et REGARDE CE QUI SE PASSE, étape par étape.

**laurentSc** · 07/11/2017, 16h03

Pourrais-tu préciser ?

je préfère quand même comprendre (et donc apprendre)

**laurentSc** · 07/11/2017, 16h05

Envoyé par laurentSc

Pourrais-tu préciser ?

Quand j'ai écrit ça, je n'avais vu que le "toi" et pas la suite...Je vais essayer...

**laurentSc** · 08/11/2017, 22h10

Bon, j'ai un peu étudié ton code et j'ai quelques questions :

1- toute la partie CSS avec les rotations :

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
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(0deg);
    -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 .hasSub.open:after {
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(180deg);
    -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;
}

pas vu ce que ça faisait car si je l'enlève, je vois pas la différence...Ca fait quoi ?

2- dans ce code CSS, la classe open (ligne 10) (si c'est bien une classe), c'est quoi ?

3- y a un bug que j'ai pas réussi à corriger : si on affiche (en survolant) le menu 3.1, puis qu'on descend pour survoler 3.2, y a tout qui disparaît. C'est quoi la correction ?

4- J'ai tenté de convertir le menu avec des desplay:table à la place de flex :

Code css :

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

1
2
3
4
5
6
/* DESKTOP : menu horizontal */
@media screen and (min-width:1025px) {
	#navMain > ul { display:table; }
	#navMain > ul > li { display:table-cell; width:25%;}
	#navMain > ul > li > ul { position:absolute; width:2100%;
	z-index:1; }

mon code est-il correct ?

Menu multi-niveaux - flex

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager