Sous-menu qui décale le contenu

**laurentSc** · 01/11/2017, 17h44

Bonjour,

j'ai un menu déroulant et quand on déroule un sous-menu, le contenu est décalé alors qu'évidemment, le sous-menu devrait s'afficher par dessus le contenu sans le décaler. Que faut-il changer dans le 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
 
<nav >
<div class="page">
<ul class="menu">
<li><a href="#">un menu</a></li>
<li class="aboveall plus"><a href="#"  >menu</a>
	<ul>
 
 
	<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>
 
</li>
<li><a href="#">un menu</a></li>
 
 
</ul>
</div>
</nav>
 
 
 
<TABLE class="table-border  width_2_third underall">
<tr ><td>bla bla 1</td></tr>
</table>
<TABLE class="table-border  width_2_third  underall2">
<tr ><td>bla bla 2</td></tr>
</table>

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
 
.width_2_third {
 width:66%;
 }	
 
 
  .table-border tr td {
  padding:5;
 }
 
 
 
 .table-border{
 border-width:1px;
 border-style:solid; 
 border-color:black;
 }
 
 
 
 
.page{
  font: normal 2em Arial, Helvetica, sans-serif;
  font-size :1.2em;
  margin: 0;
  width:55.0em;
}
 
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:lightgreen;
  border: 1px solid #48B;
  line-height:2em;
  height:4.5em;
  font-size:0.8em;
  text-align:center;
 
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.0em;
}
 
 
.menu ul.aboveall{
	position:relative;
	z-index:9999;
}
 
.underall{
	position:relative;
	z-index:0;
}
.underall2{
	position:relative;
	z-index:1;
}
 
 
.menu li {
  width:5.0em;
  margin:0 2em;
  padding:0em;
  float:left;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
	text-decoration:underline;
}
.menu li:hover > ul{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background: /*red;*/#FEFEFF;
  border:solid 1px #48B;
}
 
 
/* position et dimension des sous menus */
 
.menu ul li {	
  margin:0;
  width:10.5em;
}
 
 
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
 
}
 
 
/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
  position:relative;
  top:7px;
}

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

**JefReb** · 01/11/2017, 19h28

J'ai repris ton code.
ça marche, mais à toi de voir, car j'essaye toujours de me passer de classes:

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
.width_2_third {
	width: 66%;
}
.table-border tr td {
	padding: 5px;
}
.table-border {
	border-width: 1px;
	border-style: solid;
	border-color: black;
}
 
/* =====================================================================================*/
nav {
	position:relative;
	font: normal 2em Arial, Helvetica, sans-serif;
	font-size : 1.2em;
	margin: 0;
	width: 55.0em;	
}
nav > ul {
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	margin: 0;
	padding: 0;
	background: lightgreen;
	border: 1px solid #48B;
	line-height: 2em;
	height: 4.5em;
	font-size: 0.8em;
	text-align: center;
}
nav ul {
	list-style-type: none;
	padding:0; 		
}
nav li {
	width: 100px;	
}
nav a {	
	width: 100%;	
	text-align: center;
	display: block;
	margin: 0;
	padding: 0.5em;
	font-weight: bold;
	text-decoration: none;
	color: #00F;
}
nav > ul > li {
	float:left;						
}
nav > ul ul {
	position:absolute;
	top:2em;
	z-index:999;
	display: none; 					/* on masque */
}
/* hover */
nav li:hover > ul {
	display: block; 				/* on affiche */
}
nav a:hover {
	text-decoration: underline;	
}
 
li.plus:before {
	content: "\25BA";
	float: right;
	color: #ABC;
	position: relative;
	top: 7px;
}

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
<nav >
    <ul>
      <li><a href="#">un menu</a></li>
      <li class="plus"><a href="#"  >menu</a>
        <ul>
          <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>
      </li>
      <li><a href="#">un menu</a></li>
    </ul>
</nav>
 
<TABLE class="table-border  width_2_third underall">
  <tr >
    <td>bla bla 1</td>
  </tr>
</table>
<TABLE class="table-border  width_2_third  underall2">
  <tr >
    <td>bla bla 2</td>
  </tr>
</table>

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

Moi, je m'inquiéterais

Envoyé par JefReb

(J'espère que Jreax62 ne dira pas que c'est une usine à gaz ...

Même problème

Envoyé par jreaux62

Bravo. Encore du grand frankensteinSc.

A croire que tu as tout oublié pendant l'été...

Envoyé par JefReb

j'essaye toujours de me passer de classes

Pourquoi ? T'es fâché ?

Je continuerai demain. Merci pour ton boulot et j'aurai des questions sur ton code.

**JefReb** · 02/11/2017, 08h36

Ben non, suis pas faché, mais sans classe je trouve que c'est plus clair.
bon, parfois, on est obligé d'y passer, mais quand on peut l'éviter le code me paraît plus facile à apréhender.
Bon c'est mon avis c'est tout.
par exemple pourquoi mettre:

Code html :

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

1
2
3
4
5
6
 
<nav >
<div class="page">
<ul class="menu">
<li> ...
...

alors que

Code html :

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

1
2
3
4
5
 
<nav >
<ul>
<li> ...
...

cela fait la même chose et le css est plus clair et il est plus facile de savoir sur quoi et quel sélecteur les proprétés vont s'appliquer.

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
nav {
	...
}
nav > ul {
        ...
}
nav   li {
        ...
}

Mais encore une fois c'est mon avis. Moins de code= plus simple
Ce qui ne m'empêche pas parfois de compliquer inutilement!

Invité · 02/11/2017, 10h30

Envoyé par JefReb

Mais encore une fois c'est mon avis. Moins de code= plus simple

J'approuve !

Envoyé par JefReb

Ce qui ne m'empêche pas parfois de compliquer inutilement!

J'approuve aussi !

Invité · 02/11/2017, 10h37

Code :

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

1
2
3
<nav >
<div class="page">
<ul class="menu">

Laurent, la balise <nav> sert à indiquer une "navigation" : donc, que fait une class "page" là-dedans ?

COMMENCE par écrire un code HTML syntaxiquement et sémantiquement CORRECT.

Quant au CSS, ARRETE de mettre des classes à tout bout de champ !!
Tu compliques tout inutilement !...

Et je ne parle même pas du design de ton menu

**laurentSc** · 02/11/2017, 10h49

OK et voici mon besoin d'éclaircissement : si je me fis à http://debray-jerome.developpez.com/...s-en-css3/#LVI, pas moyen de voir la différence entre nav > ul et nav ul. D'après ce que j'ai lu, tous les 2 désignent un ul enfant de nav. Donc quelle est la différence ?

Autre point :

Envoyé par jreaux62

Et je ne parle même pas du design de ton menu

C'est un code que j'ai repris (ça fait déjà longtemps et je sais plus où) et que je me suis contenté de modifier pour le faire coller à mon besoin.

Invité · 02/11/2017, 11h16

Il faut lire un peu mieux la DOCUMENTATION.

nav ul : TOUS les ul enfants (quel que soit le niveau)
nav > ul : uniquement les ul enfants DIRECTS (1er niveau)

Voilà une base de travail : https://codepen.io/jreaux62/pen/yPYWMz

Code :

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
<nav id="menu">
  <ul>
    <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
      <ul>
        <li><a href="#">menu 1.1</a></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><a href="#">menu 2.2</a></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><a href="#">menu 4.1</a></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>

Code :

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
* {
  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;
}

**laurentSc** · 02/11/2017, 15h11

Merci pour la base de travail (que j'avais pas vue en fin de matinée).
1e question : pourquoi le lien pour les menus de niveau 1 sont javascript:void(0) et pour le niveau 2 # ?

2e question : comment ajouter un niveau 3 ? J'ai essayé de modifier le code : https://codepen.io/laurentsc/pen/pdgvMN/

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
<nav id="menu">
  <ul>
    <li class="hasSub"><a href="javascript:void(0)">menu 1</a>
      <ul>
        <li><a href="#">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><a href="#">menu 2.2</a></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><a href="#">menu 4.1</a></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>

css pas modifié ; mais je voudrais que le niveau 3 s'affiche à droite du niveau 2 (sauf à gauche pour le dernier menu de niveau 2) et là il s'affiche par dessus le niveau 2 et donc le masque.

Invité · 02/11/2017, 15h16

Bonjour Laurent,

comme je l'ai déjà expliqué à JefReb, on met javascript:void(0) pour les liens AVEC sous-menu, à cause des médias TACTILES.
Il ne faut pas activer le lien en appuyant simplement sur le menu.

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
/* --- 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: 100%;
  top: 0;
  left:-100%; /* sous-menu A GAUCHE */
}

Et pour ajouter les bonnes flèches :

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
/* ----------- 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;
}

Voir : Icones web Unicode

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

Merci pour ta réponse immédiate. Du coup, j'ai rajouté quelques menus de niveau 3 : https://codepen.io/laurentsc/pen/pdgvMN/

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
<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>

css inchangé. Par contre le sous-menu de niveau 3 sous le menu de niveau 2 "4.1" est trop large (même largeur que le niveau 2). Comment réduire sa largeur ?

Invité · 02/11/2017, 16h34

Fait un effort de LECTURE !

C'est écrit dans le code CSS.

Voilà un exemple (pour écran suffisamment large*) :

Code :

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
* {
  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 niveau 2 et suivants --- */
nav > ul ul {
  position: absolute;
  width: 50%;
  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 { /* dernier li du 1er ul */
  width: 50%;
  top: 100%;
  left:50%;
}
nav > ul > li:last-child ul ul { /* dernier li du 1er ul */
  position: absolute;
  width: 100%;
  top: 0;
  left:-100%; /* sous-menu A GAUCHE */
}
/* ----------- 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;
}
nav > ul > li li.hasSub:before {
  content: "\25BA";
  bottom: 7px;
}
nav > ul > li:last-child li.hasSub:before {
  content: "\25C4";
  bottom: 7px;
}

* les medias queries permettent d'adapter l'affichage en fonction de la largeur de la fenêtre.
Mais ça, on le garde pour une autre ~~leçon~~ discussion...

N.B. Si tu te contentes de COPIER-COLLER mes codes A LA SUITE les uns des autres, tu ne comprendras jamais rien...

Sous-menu qui décale le contenu

CSS

Discussions similaires

Partager

Partager