Espace netre menu et sous menu

**sinzen** · 14/07/2017, 09h43

Bonjour,

Je débute en CSS et je voudrait créer une menu

et un sous menu avec un espace entre le menu horizontale et le sous-menu horizontale également

mon souci c'est quand survol le lien du menu et que je veux passer au sous menu il disparait

pour que ca fonctionne il ne faut pas d'espace entre les menus

voici ce que je fais en CSS:

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
nav ul.primary-menu {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
 
nav ul li {
    font-family: 'Roboto', sans-serif;
    border-bottom: none;
    height: 86px;
    line-height: 86px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}
 
nav ul li a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
  padding:0 24px;
}
 
nav ul li a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}
 
nav a {
  border-bottom:none;
}
 
nav li ul {
  position:absolute;
  display:none;
  width:inherit;
  background-color: yellow;
  margin-top: 3em;   // requis car je voudrait un espacement entre le menu et le sous menu
}
 
nav li:hover ul {
  display:block;
}
 
nav ul li ul li {
  display: block;
}

et ma structure HTML:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
    </head>
    <body>
    <nav>
    	<ul class="primary-menu">
    		<li><a>Men</a><div class="flyout__tab"></div>
    			<ul class="sub-menu">
		    		<li><a>T-shirt</a></li>
		    		<li><a>Sweat</a></li>
		    		<li><a>Bags</a></li>
    				<li><a>Shoes</a></li>    				
    			</ul>
    		</li>
    		<li><a>Women</a><div class="flyout__tab"></div></li> 
    		<li><a>Kids</a><div class="flyout__tab"></div></li> 
    		<li><a>Indoor</a><div class="flyout__tab"></div></li> 
    		<li><a>Car</a><div class="flyout__tab"></div></li> 
    		<li><a>House</a><div class="flyout__tab"></div></li> 
    		<li><a>Trucks</a><div class="flyout__tab"></div></li> 
    		<li><a>Computer</a><div class="flyout__tab"></div></li> 
    		<li><a>Tablet</a><div class="flyout__tab"></div></li> 
    		<li><a>Phone</a><div class="flyout__tab"></div></li> 
    	</ul>
    </nav>
    </body>
</html>

merci.

**JefReb** · 14/07/2017, 18h11

Rebonjour Sinzen,
Je vois que tu n'as pas résolu ton problème d'empreinte que je n'ai toujours pas vu ou compris.
Pour ton problème de sous-menus, je m'y suis collé en modifiant quelques dimensions faciles à changer.
Est-ce que c'est cela que tu veux obtenir? j'ai rajouter des sous-sous-menus et une couleur de fond pour le menu principal afin de voir les séparations.
https://codepen.io/JefReb/pen/dRrzJE

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
nav {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
nav ul {
	line-height: 86px;
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}
nav a {
	display: block;
	width: 150px;
	text-decoration: none;
	color: #000000;
	background-color: yellow;
	/*transition: .3s background-color;*/
	padding: 0;
}
Nav > ul > li > a {
	background-color: rgba(92,137,199,0.2); /* un peu de couleur sur la première ligne pour voir les séparations */
}
nav li {
	float: left;
	border-right: 1px solid transparent;
}
nav li ul li {
	float: none;
}
nav li ul {
	position: absolute;
	display: none;
	line-height: 28px;
}
nav li ul li {
	border-top : 1px solid transparent;
}
nav li ul ul {								/* les sous-sous-listes */
	margin : -28px 0 0 150px;
	border-left : 1px solid transparent;
}
nav li:hover ul ul {
	display: none;
}
nav li a:hover {
	background-color: #5c89c7;
	color: #FFFFFF;
	text-decoration: underline;
}
nav li:hover ul, nav li li:hover ul {
	display: block;
}

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
<nav>
  <ul>
    <li><a>Men</a>
      <div class="flyout__tab"></div>
      <ul>
        <li><a>T-shirt</a>
          <ul>
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
            <li><a>item4</a></li>
          </ul>
        </li>
        <li><a>Sweat</a></li>
        <li><a>Bags</a></li>
        <li><a>Shoes</a>
          <ul>
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
            <li><a>item4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a>Women</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Kids</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Indoor</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Car</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>House</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Trucks</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Computer</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Tablet</a>
      <div class="flyout__tab"></div>
    </li>
    <li><a>Phone</a>
      <div class="flyout__tab"></div>
    </li>
  </ul>
</nav>

**sinzen** · 14/07/2017, 23h07

Un grand merci pour ton post..

Je viens de finir mon menu et j'avais des souci avec l'espace entre le menu et le sous menu

mon menu devait être horizontale(menu et sous menu)

je poste le travail réalisé

https://codepen.io/sinzen/full/MoxVRb

tout est résolu maintenant.

Un grand merci et un bon-week a toi!

**sinzen** · 14/07/2017, 23h52

J'aimerais une explication sur l'utilisation de before et after..

pourquoi permet-il de garder une marge sur le hover..?

et encore une autre question..

comment régler la largeur de mon menu et de mon sous menu?

disons que je veux 900px de large pour les deux menus?

merci d'avance.

**JefReb** · 15/07/2017, 11h34

Je vais essayer de répondre sur ::after et ::before
Un exemple très simple.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
p {
	font-size: 150%;
}
span::before {
	content: "«";
	color: blue;
        font-size: 200%;
}
span::after {
	content: '»';
	color: red;
        font-size: 200%;
}

Code html :

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

<p><span>Quelques guillemets</span>, dit-il, <span>sont mieux que pas du tout</span></p>

ce qui donne: https://codepen.io/JefReb/pen/PjLXyN
Mais on peut faire beaucoup de chose avec.

Prenons l'exemple d'un 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
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
* {
	box-sizing: border-box;
}
html, body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
nav > ul > li {
	border-right: 1px solid transparent;
}
nav >ul > li ul li {
	border-top: 1px solid transparent;
}
nav a {
	width:144px;  /* largeur par défaut */
	padding: 0;
	display: inline-block;
	text-decoration: none;
	line-height: 28px;
	text-align: center;
	background: rgba(0,90,174,1);
	color: #b1d9ff;
}
/* ========================================================================== 
 *      Il est possible de jouer sur la largeur des sous niveaus	       						  			  			  
 *     Mais attention il faut penser à décaler les niveaux de 3ème niveau  
 *     exemple par défaut: 
 *                         largeur: 144px = 144px + 1px de bordure = 145px
 *                         hauteur: 28px +1px = 29px  
 *                      donc margin:-29px 0 0 145px;  
 */
nav > ul > li ul a {
width: 250px;		/* largeur des seconds niveaux */				
}
/*
 * si la largeur des sous-niveaux à changé 
 * 250px + 1px = 251px
 */
nav > ul > li ul ul {
	margin : -29px 0 0 251px;
}
/* ============================================================================ */
nav > ul > li ul a {
	background: rgba(0,90,174,0.8);
	color: white;
}
nav a:hover {
	text-decoration: underline;
	color: #005aae;
	font-weight: bold;
	background: #b1d9ff;
}
nav a:hover[href="#"] {
	text-decoration: none;  	/* dans ce cas le lien n'est pas surligné  */
}
nav > ul > li {
	float : left;				/* la premier niveau en flottant uniquement */
}
nav li ul {
	position: absolute;			
	visibility: hidden;			
}
nav > ul li:hover ul ul, 
nav > ul ul li:hover ul ul, 
nav > ul ul ul li:hover ul ul {
	visibility: hidden;		
}
nav > ul li:hover ul, 
nav > ul ul li:hover ul, 
nav > ul ul ul li:hover ul {
	visibility: visible;		
	z-index: 1;
}

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
<nav>
<ul>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="http://www.google.fr">item 1.1</a></li>
      <li><a href="#">item 1.2</a>
        <ul>
          <li><a href="http://www.google.fr">item 1.2.1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://www.google.fr">Item 2</a></li>
</ul>
</nav>

Menu tout simple qui pourra être critiqué, mais qui reste un exemple.
Il est possible de faire apparaîte des petits triangles, indiquant qu'il y a des sous-menus.
Par exemple:

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
nav > ul ul li:first-of-type > a::after {
	content: '';
	position: absolute;
	left: 10px;
	top: -9px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent rgba(0,90,174,0.8);
}
nav > ul ul ul li:first-of-type a::after {
	content: '';
	position: absolute;
	left: -10px;
	top: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 10px 5px 0;
	border-color: transparent rgba(0,90,174,0.8) transparent;
}
nav > ul ul li:hover:first-of-type > a::after {
	border-color: transparent transparent #b1d9ff;
}
nav > ul ul ul li:hover:first-of-type a::after {
	border-color: transparent #b1d9ff transparent;
}