Menu multi-niveaux - flex

Invité · 09/11/2017, 08h14

Bonjour,

1- c'est écrit dans le code. Ouvre les yeux.

2- oui, c'est une classe.
Inutile en CSS pur, puisqu'elle était ajoutée via jQuery dans l'autre code (avec jQuery, donc)
Enlève-la...

3- 3 solutions :

ne pas mettre de niveau supérieur à 3 (ergonomiquement, ce n'est pas bon non plus)
utiliser le code avec jQuery (au clic)
ou afficher le niveau 4 sur le coté (ce qui posera d'autres soucis, mais bon...) :

Code css :

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

1
2
3
4
5
6
7
8
9
10
/* DESKTOP : menu horizontal */
@media screen and (min-width:1025px) {
 /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à droite*/
	#navMain > ul > li > ul > li > ul > li > ul { position:absolute; width:100%;
    left:100%; top:0; /*droite*/
	z-index:1; }
	#navMain > ul > li:last-child > ul > li > ul > li > ul { position:absolute; width:100%;
    left:-100%; top:0; /*dernier à gauche*/
	z-index:1; }
}

ou

Code css :

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

1
2
3
4
5
6
7
8
9
10
/* DESKTOP : menu horizontal */
@media screen and (min-width:1025px) {
 /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à gauche*/
	#navMain > ul > li > ul > li > ul > li > ul { position:absolute; width:100%;
    left:-100%; top:0; /*à gauche*/
	z-index:1; }
	#navMain > ul > li:last-child > ul > li > ul > li > ul { position:absolute; width:100%;
    left:100%; top:0; /*dernier à droite*/
	z-index:1; }
}

4- as-tu testé ?

**laurentSc** · 09/11/2017, 10h48

A quoi ça sert de coder une rotation de 0° ?

Hier soir, je croyais que mon code de display:table fonctionnait mais pas ce matin...Est-ce possible ?

Invité · 09/11/2017, 11h47

1- Pour les flèche, puisqu'il n'y a pas d'ajout de la classe "open", il n'y a pas de rotation des flèches.
il faut alors remplacer :

Code :

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

#navMain .hasSub.open:after {

par

Code :

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

#navMain .hasSub:hover:after {

Quant au( 0deg), essaye sans, tu verras bien.

2- Pour le display:table;... montre TON code... COMPLET !
Pas des "petits bouts (mal) choisis" !

N.B. J'ai fait évoluer mon "MENU multi-niveaux - Full CSS (:hover)" : https://codepen.io/jreaux62/pen/gXweLY

Néanmoins, le :hover est toujours déconseillé sur médias TACTILES !

**laurentSc** · 09/11/2017, 14h26

OK, c'est mieux de laisser une rotation de 0 degrés...

J'ai modifié ton dernier Codepen avec mon display:table https://codepen.io/laurentsc/pen/GOrEQe/

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
 
<nav id="navMain">
  <ul>
    <li class="active hasSub"><!-- active : menu EN COURS -->
      <a href="#">A - One</a>
      <ul>
        <li>
          <a href="#">1</a>
        </li>
        <li class="hasSub">
          <a href="#">2</a>
          <ul>
            <li>
              <a href="#">2.1</a>
            </li>
            <li>
              <a href="#">2.2</a>
            </li>
            <li>
              <a href="#">2.3</a>
            </li>
            <li>
              <a href="#">2.4</a>
            </li>
            <li>
              <a href="#">2.5</a>
            </li>
            <li>
              <a href="#">2.6</a>
            </li>
          </ul>
        </li>
        <li class="hasSub">
          <a href="#">3</a>
          <ul>
            <li class="hasSub">
              <a href="#">3.1</a>
              <ul>
                <li>
                  <a href="#">3.11</a>
                </li>
                <li>
                  <a href="#">3.12</a>
                </li>
                <li>
                  <a href="#">3.13</a>
                </li>
                <li>
                  <a href="#">3.14</a>
                </li>
                <li>
                  <a href="#">3.15</a>
                </li>
              </ul>
            </li>
            <li class="hasSub">
              <a href="#">3.2</a>
              <ul>
                <li>
                  <a href="#">3.21</a>
                </li>
                <li>
                  <a href="#">3.22</a>
                </li>
                <li>
                  <a href="#">3.23</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">3.3</a>
            </li>
            <li>
              <a href="#">3.4</a>
            </li>
            <li>
              <a href="#">3.5</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">4</a>
        </li>
      </ul>
    </li>
    <li class="hasSub">
      <a href="#">B - Two</a>
      <ul>
        <li>
          <a href="#">5</a>
        </li>
        <li>
          <a href="#">6</a>
        </li>
        <li>
          <a href="#">7</a>
        </li>
        <li>
          <a href="#">8</a>
        </li>
      </ul>
    </li>
    <li class="hasSub">
      <a href="#">C - Three</a>
      <ul>
        <li>
          <a href="#">9</a>
        </li>
        <li>
          <a href="#">10</a>
        </li>
        <li>
          <a href="#">11</a>
        </li>
        <li>
          <li class="hasSub">
            <a href="#">12</a>
            <ul>
              <li>
                <a href="#">12.1</a>
              </li>
              <li>
                <a href="#">12.2</a>
              </li>
              <li>
                <a href="#">12.3</a>
              </li>
              <li>
                <a href="#">12.4</a>
              </li>
            </ul>
          </li>
      </ul>
      </li>
      <li class="hasSub">
        <a href="#">D - Four</a>
        <ul>
          <li>
            <a href="#">1</a>
          </li>
          <li class="hasSub">
            <a href="#">2</a>
            <ul>
              <li>
                <a href="#">2.1</a>
              </li>
              <li>
                <a href="#">2.2</a>
              </li>
              <li>
                <a href="#">2.3</a>
              </li>
              <li>
                <a href="#">2.4</a>
              </li>
              <li>
                <a href="#">2.5</a>
              </li>
              <li>
                <a href="#">2.6</a>
              </li>
            </ul>
          </li>
          <li class="hasSub">
            <a href="#">3</a>
            <ul>
              <li class="hasSub">
                <a href="#">3.1</a>
                <ul>
                  <li>
                    <a href="#">3.11</a>
                  </li>
                  <li>
                    <a href="#">3.12</a>
                  </li>
                  <li>
                    <a href="#">3.13</a>
                  </li>
                  <li>
                    <a href="#">3.14</a>
                  </li>
                  <li>
                    <a href="#">3.15</a>
                  </li>
                </ul>
              </li>
              <li class="hasSub">
                <a href="#">3.2</a>
                <ul>
                  <li>
                    <a href="#">3.21</a>
                  </li>
                  <li>
                    <a href="#">3.22</a>
                  </li>
                  <li>
                    <a href="#">3.23</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">3.3</a>
              </li>
              <li>
                <a href="#">3.4</a>
              </li>
              <li>
                <a href="#">3.5</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">4</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
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
 
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* ------------------------------- */
/* MENU */
#navMain {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
#navMain ul,
#navMain li,
#navMain a {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  text-decoration: none;
}
#navMain ul li {
  display: block;
}
#navMain ul li a {
  display: block;
  color: #fff;
  padding: 10px 10px;
  position: relative;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* --------------- */
/* MENU : niveau 1 */
#navMain > ul > li > a {
  background: #2980b9;
  box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
}
/* --------------- */
/* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
#navMain > ul > li.active > a {
  background: #20638f;
}
/* --------------- */
/* MENU : niveau 2 et suivants */
#navMain ul ul > li > a {
  padding-left: 30px;
}
#navMain ul ul > li {
  background: #333;
  box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;
}
/* --------------- */
/* MENU : niveau 3 et suivants */
#navMain ul ul ul > li > a {
  padding-left: 30px;
}
#navMain ul ul ul > li {
  background: #555;
  box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
}
#navMain ul ul ul ul > li > a {
  padding-left: 30px;
}
#navMain ul ul ul ul > li {
  background: #888;
  box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset;
}
/* --------------- */
/* hover */
#navMain ul li:hover {
  background: #20638f;
  box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
}
#navMain > ul > li:hover > a {
  background: #20638f;
}
/* --------------- */
/* avec sous-menu */
#navMain li.hasSub > ul {
  display: none;
}
 
/* ------------------------------- */
/* 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;
}
 
/* ------------------------------- */
/* TEST : menu full vertical */
/*	#navMain { max-width:480px; } */
/* ------------------------------- */
/* PHONE : menu vertical */
@media screen and (max-width: 640px) {
  #navMain {
    /*max-width: 480px;*/ /* pour TEST */
  }
}
/* ---------- responsive  --------- */
/* DESKTOP : menu horizontal */
@media screen and (min-width:1025px) {
	#navMain > ul { display:table; }
	#navMain > ul > li { display:table-cell; width:30%;}
	#navMain > ul > li > ul { position:absolute; width:100%;
	z-index:1; }
 
  #navMain > ul > li > ul {
    position: absolute;
    width: 100%;
    z-index: 1;
  }
  /*SPECIAL : SOUS-SOUS-MENU niveau 3 à droite*/
  #navMain > ul > li > ul > li > ul {
    position: absolute;
    width: 100%;
    left: 100%; top: 0; /*à droite*/
    z-index: 1;
  }
  #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%; top: 0; /*dernier à gauche*/
    z-index: 1;
  }
  /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à gauche*/
  #navMain > ul > li > ul > li > ul > li > ul {
    position: absolute;
    width: 100%;
    left: 100%; top: 0; /*à droite*/
    /*left: -100%; top: 0;*/ /*à gauche*/
    z-index: 1;
  }
  #navMain > ul > li:nth-last-child(2) > ul > li > ul > li > ul, /*avant-dernier*/
  #navMain > ul > li:last-child > ul > li > ul > li > ul {
    position: absolute;
    width: 100%;
    left: -100%; top: 0; /*dernier à gauche*/
    /*left: 100%; top: 0;*/ /*dernier droite*/
    z-index: 1;
  }
/* ------------------------------- */
/* fleche, avec rotation - niveaux 2 et suivants */
  #navMain > ul > li:nth-last-child(2) ul li.hasSub:after, /*avant-dernier*/
  #navMain > ul > li:last-child ul li.hasSub:after {
    right: auto;
    left: 10px;
  }
  #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: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:hover:after {
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
 
/* TABLET : menu horizontal */
/*
@media screen and (min-width:641px) and (max-width:1024px) {
	#navMain > ul { display:-webkit-flex; display:flex; }
	#navMain > ul > li { -webkit-flex:1 1 25%; flex:1 1 25%; }
	#navMain > ul > li > ul { position:absolute; width:100%;
	z-index:1; }
}
*/
 
/* --------------- */
/* HOVER : afficher/masquer les SOUS-MENUS*/
#navMain ul li > ul {
  display: none; /*on masque le SOUS-MENU*/
}
#navMain ul li:hover > ul {
  display: block; /*on affiche le SOUS-MENU*/
}

c'est visiblement pas bon, mais peut-on le faire marcher ? (pour que j'apprenne)

Invité · 09/11/2017, 17h17

Code :

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

1
2
3
	#navMain > ul { display:table; width:100%; }
	#navMain > ul > li { display:table-cell; }
	#navMain > ul > li > ul { position:absolute; width:100%;

Je te laisse trouver où le modifier.
Sinon, tu vas encore te contenter de copier-coller à la suite du code...

**laurentSc** · 09/11/2017, 21h55

Pas eu la possibilité de tester avant...

Sinon, tu vas encore te contenter de copier-coller à la suite du code...

tu me connais bien

Curieux car le codepen https://codepen.io/laurentsc/details/jayXby/ a un comportement différent de si je mets le code dans une page...Le menu du codepen a une largeur normale mais pas celui de la page et par contre les flèches du codepen sont fixes alors que celles de la page tournent comme il faut...

J'ai aussi un problème pour l'intégrer dans mon site, mais on verra plus tard (sûrement demain); réglons déjà le problème ci-dessus.

Invité · 10/11/2017, 08h57

bonjour Laurent,

Quand on te donne un code qui fonctionne, tu arrives systématiquement à en faire une bouse.

Ca tient du génie...

**laurentSc** · 10/11/2017, 16h46

Ca tient du génie...

Merci de reconnaître mon talent

T'aurais pas un indice à me donner pour que je puisse m'extraire de cette bouse ?

Invité · 10/11/2017, 17h05

Si : prendre mon code tel quel, sans y toucher.

**laurentSc** · 10/11/2017, 17h15

Certes, mais pour apprendre, j'aimerais savoir le modifier.

Invité · 10/11/2017, 17h52

Mais je ne peux rien pour ça...

Je t'ai indiqué une méthode :

commencer SIMPLE -> Menu à UN SEUL niveau (= PAS de sous-menus) : justement, c'est à ce niveau que tu peux mettre en display:table !
Et ajouter le CSS au fur et à mesure.

Code :

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

1
2
3
4
5
6
7
8
<nav id="navMain">
  <ul>
    <li><a href="#">A - One</a></li>
    <li><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

Si déjà tu arrives à placer ça correctement, tu pourras continuer.
Pas avant.

**laurentSc** · 10/11/2017, 22h19

J'ai essayé d'appliquer : https://codepen.io/laurentsc/pen/aVJGYa

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
<nav id="navMain">
  <ul>
    <li class="active"><!-- active : menu EN COURS -->
      <a href="#">A - One</a>
    </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
 
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* ------------------------------- */
/* MENU */
 
#navMain ul,
#navMain li,
#navMain a {
  text-decoration: none;
}
#navMain ul {display:table;width:50%;}
 
#navMain > ul > li { display:table-cell; }
 
#navMain ul li a {
  display: block;
  color: #fff;
  padding: 10px 10px;
}
/* -------------- */
/* MENU : niveau 1 */
#navMain > ul > li > a {
  background: #2980b9;
}
/* --------------- */
/* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
#navMain > ul > li.active > a {
  background: #20638f;
}
 
}

Qu'est-ce que ça vaut ?

Invité · 11/11/2017, 10h53

OK.

Exercice 2 :

Centrer ton menu
Largeur mini : 640px

Exercice 3 :

On garde le menu horizontal pour tablette et desktop
On met le menu vertical sur phone (largeur inférieure à 640px)

Indice : media queries

N.B. en "mobile first" :

on écrit d'abord le code pour phone,
Puis, avec media queries, celui pour tablette, et desktop

Allez, au boulot !

**laurentSc** · 11/11/2017, 12h53

Voici les exercices 2 et 3 : codepen mis à jour : https://codepen.io/laurentsc/details/aVJGYa/

html inchangé et css :

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
 
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* ------------------------------- */
/* MENU */
 
#navMain ul,
#navMain li,
#navMain a {
  text-decoration: none;
}
#navMain ul {display:table;width:50%;
margin:auto;
/*min-width:640px;*/}
 
 
 
#navMain ul li a {
  display: block;
  color: #fff;
  padding: 10px 10px;
}
/* -------------- */
/* MENU : niveau 1 */
#navMain > ul > li > a {
  background: #2980b9;
}
/* --------------- */
/* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
#navMain > ul > li.active > a {
  background: #20638f;
}
 
@media screen and (max-width: 640px) {
#navMain > ul > li { display:table-row; }
#navMain ul{margin:0;}
}
 
@media screen and (min-width: 641px) {
#navMain > ul > li { display:table-cell;width:2%; }
#navMain ul{margin:auto;}
}

Super que tu me proposes des exercices...Merci de me donner la suite.

Invité · 11/11/2017, 13h34

Corrections à faire avant du continuer :

1- le comportement normal des <li> est d'être block, et s'affichent naturellement l'un en dessous de l'autre.
Donc pas besoin de display:table-xxx pour phone. À supprimer

2- Phone : mettre la largeur à 100%.

3- Desktop : où est "largeur mini 640px" ?

Exercice 4 :

Ajouter un niveau de sous-menu (niveau 2) au menu "A" (pas de flèche pour l'instant)
Desktop : l'afficher (avec :hover) SOUS le menu (indice : position absolute). Largeur du sous-menu 100%, minimum 180px.
Phone : l'afficher (avec :hover) DANS le menu (indice : position relative)

Important : commence toujours par la version "phone" ("mobile first")

Invité · 11/11/2017, 13h57

Je te conseille de créer UN codepen par exercice,
et à y ajouter des commentaires, de sorte que tu puisses y revenir plus tard.

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

Invité · 11/11/2017, 14h03

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

Exercice 7:

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

Invité · 11/11/2017, 14h09

Exercice 8 :

Ajouter un sous-menu et un sous-sous-menu au menu "D"(le dernier)
Reprendre les exercices précédents, mais comme c'est le dernier du menu, le sous-sous-menu doit s'afficher À GAUCHE de son parent
Idem : on change le sens des flèches pour ce dernier menu

Exercice 9 :

Si tu veux, tu peux encore ajouter un nouveau niveau (niveau 4), mais, ergonomiquement, c'est déconseillé.

Exercice 10 :

Teste display:flex sur le niveau 1

**laurentSc** · 11/11/2017, 18h28

Merci pour toutes ces étapes. En fait, elles sont toutes arrivées pendant mon repas de midi ! Je m'y suis mis, même si je suis très loin d'un 100%...De plus, je prend mon temps car je me renseigne au passage sur les propriétés CSS que je connais mal (ou pas). Je viens de prendre en compte les corrections du post #35 : https://codepen.io/laurentsc/pen/XzMvba/ et je vais passer à l'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
 
/* ce qu'on applique à tous les éléments html */
* {
  margin: 0;/* marge extérieure */
  padding: 0;/* marge intérieure */
  border: 0;
}
/* ------------------------------- */
/* MENU */
 
#navMain ul,
#navMain li,
#navMain a {
  text-decoration: none;/* ne pas souligner */
}
#navMain ul {
  display:table;
  width:50%;/* largeur du menu */
}
 
/* -------------- */
/* 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 > li { display:table-cell; width:10%; }
#navMain ul{margin:auto;}/* si menu horiz le centrer */
min-width:640px;
}

Invité · 11/11/2017, 20h02

Tu as du code en trop.

text-decoration ne s'applique qu'à a.
width:50%; ne doit s'appliquer que pour desktop. display:table aussi.
Pas besoin de query pour phone.

À corriger.

Il ne faut que le code nécessaire et suffisant.

Je résume :

1- écris le code uniquement pour phone : c'est un code simple !
presque RIEN à écrire, puisque c'est le fonctionnement normal, par défaut, des balises.

2- ajoute ensuite, avec media query, le code pour desktop (ici, supérieur à 640px)

Si déjà là, tu ne comprends pas bien à quoi sert chaque instruction, inutile d'aller plus loin.

Menu multi-niveaux - flex

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager