Sous menu CSS3

**Jeremy60500** · 02/05/2013, 09h08

Bonjour,

Je souhaiterais réaliser des sous menus mais je rencontre quelques difficultés...

Pouvez-vous m'aider à réaliser, à partir de mon menu (ci-dessous), des sous menus apparaissant lorsque la souris se positionne sur l'élément père ?

Code HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="menu">
 
      <ul>
          <li><a href="accueil.php"><img src="images/petit1.fw.png" id="logo"></a></li>
        <li><a href="inventaire.php">Inventaire</a></li>
        <li><a href="assistance.php">Assistance</a></li>
        <li><a href="technicien.php">Technicien</a></li>
        <li><a href="contact.php">Administration</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
  </ul>
</div>

Code 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
#menu {
    width: 1000px;
    margin:0px
}
 
#menu ul {
    float: left;
    list-style-type: none;
    width: 960px;
    height: 38px;
    background: #e3e3e3;
    background: -moz-linear-gradient(top, #ccc, #999);
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    -moz-box-shadow: 1px 1px 3px #333;
    -webkit-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 2px #333;
    margin:0px;
}
 
#menu ul a{
    display: block;
    padding: 10px 20px 10px 20px;
    list-style-type: none;
    float: left;
    color: #454545;
    font-size:15px;
    text-decoration: none;
}
 
#menu ul a:hover{
    display: block;
    padding: 10px 20px 10px 20px;
    list-style-type: none;
    float: left;
    color: #ddd;
 
    text-shadow: 0 1px 0 black;
 
    background: #555;
    background: -moz-linear-gradient(top, #444, #555);
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}

Ainsi, à partir du code HTML suivant, faire apparaître les sous menu "Test 1" et "Test 2", au passage de la souris sur l'élément "Inventaire".

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
<div id="menu">
 
      <ul>
          <li><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
        <li><a href="inventaire.php">Inventaire</a></li>
            <ul>
        <li><a href="">Test1</a></li>
        <li><a href="">Test2</a></li>
           </ul>
        <li><a href="assistance.php">Assistance</a></li>
        <li><a href="technicien.php">Technicien</a></li>
        <li><a href="contact.php">Administration</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
  </ul>
</div>

Merci de votre coup de pouce

**Torgar** · 02/05/2013, 10h00

Salut,

L'imbrication n'est pas bonne pour ton sous-menu :

Code html :

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

1
2
3
4
5
6
<li><a href="inventaire.php">Inventaire</a>
	<ul>
        <li><a href="">Test1</a></li>
        <li><a href="">Test2</a></li>
	</ul>
</li>

Je te conseillerai de faire un petit tour sur cette page, histoire d'avoir un exemple.

**saymoneu** · 02/05/2013, 10h04

Et il faut aussi effectuer un traitement sur la liste de niveau 2 (après avoir correctement imbriqué comme l'a dit Torgar):

Code css :

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

1
2
3
4
5
6
#menu ul ul{
        display:none;
}
#menu ul li:hover ul{
	display:block;
}

**Jeremy60500** · 02/05/2013, 10h58

Merci de vos conseils

C'est un peu mieux mais pas encore tout à fait ça. Je souhaiterais que les sous menus se mettent en dessous de l'élément, là dans mon cas il le remplace

Code 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
<div id="menu">
 
      <ul>
      	<li><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
                <li>
                <a href="inventaire.php">Inventaire</a>
        	<ul>
        		<li><a href="">Test 1</a></li>
        		<li><a href="">Test 2</a></li>
            </ul>
            	</li>
        <li><a href="assistance.php">Assistance</a></li>
        <li><a href="technicien.php">Technicien</a></li>
        <li><a href="contact.php">Administration</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
  </ul>
</div>

Code 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
46
47
48
#menu {
	width: 1000px;
	margin:0px
}
 
#menu ul {
	list-style-type: none;
	width: 1000px;
	height: 38px;
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 2px #333;
	margin:0px;
	overflow:hidden;
	position:absolute; 	
	margin:0; padding:0;   
}
 
#menu ul a{
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	float:left;
	color: #454545;
	font-size:15px;
	text-decoration: none;
}
 
#menu ul a:hover{
	display: block;
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	color: #ddd;
	text-shadow: 0 1px 0 black;
	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}
 
#menu ul ul{
	display:none;
}
 
#menu ul li:hover ul{
	display:block;
}

Merci

**saymoneu** · 02/05/2013, 11h10

Ok, enlevez l'overflow:hidden dans "#menu ul" et complétez le "#menu ul ul" :

Code css :

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

1
2
3
4
#menu ul ul{
display:none;
top:37px;
}

**Jeremy60500** · 02/05/2013, 11h22

Génial

Dernière précision (je sais je suis chiant

), comment faire pour aligner les sous menus l'un en dessous de l'autre, et qu'ils soient de la même taille que l'élément principale ?

En tout cas, merci beaucoup

**saymoneu** · 02/05/2013, 12h04

Pour ça, j'ai été obligé de mettre une classe sur le sous menu :

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
<div id="menu">
  <ul>
    <li class="l1"><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
    <li class="l1"> <a href="inventaire.php">Inventaire</a>
      <ul class="sousmenu">
        <li><a href="">Test 1</a></li>
        <li><a href="">Test 2</a></li>
      </ul>
    </li>
    <li class="l1"><a href="assistance.php">Assistance</a></li>
    <li class="l1"><a href="technicien.php">Technicien</a></li>
    <li class="l1"><a href="contact.php">Administration</a></li>
    <li class="l1"><a href="contact.php">Contact</a></li>
    <li class="l1">
      <input type="search" id="search" placeholder="Rechercher" size="20">
    </li>
  </ul>
</div>

et de changer pas mal les sélecteurs css, en jouant avec le display:inline ou display:block:

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
#menu {
	width: 1000px;
	margin: 0px;
}
#menu ul {
	list-style-type: none;
	width: 1000px;
	height: 38px;
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 2px #333;
	margin: 0px;
	position: absolute;
	margin: 0;
	padding: 0;
}
#menu ul li.l1 {
	display: inline;
}
#menu ul>li.l1>a {
	float: left;
}
#menu ul>li.l1 a {
	padding: 10px 20px 10px 20px;
	color: #454545;
	font-size: 15px;
	color: #ddd;
	text-decoration: none;
}
#menu ul>li.l1>a:hover {
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	color: #ddd;
	text-shadow: 0 1px 0 black;
	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}
#menu ul ul.sousmenu {
	display: none;
	position: absolute;
	top: 37px;
	float: none;
	width: 100px;
	left: 40px;
	text-align: center;
}
#menu ul li:hover ul.sousmenu {
	display: block;
}
#menu ul.sousmenu>li a:hover {
	color: black;
}

Il y a surement une façon plus simple de faire ça mais moi je fais ca comme ça

.

**Jeremy60500** · 02/05/2013, 13h26

Merci, ça marche bien pour un seul sous-menu. Mais si je souhaite avoir plusieurs sous menus, ça veut dire qu'il faut que je multiplie les class "sousmenu" ?

**saymoneu** · 02/05/2013, 13h38

Alors non, pas seulement, car il faut gérer à chaque fois la largeur et la position du sous-menu. Du coup j'ai modifié le code de façon à ce que ce soit plus facile, en rejoutant un id à chaque sous-menu.

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
<div id="menu">
  <ul>
    <li class="l1"><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
    <li class="l1"> <a href="inventaire.php">Inventaire</a>
      <ul class="sousmenu" id="menu1">
        <li><a href="">Test 1</a></li>
        <li><a href="">Test 2</a></li>
      </ul>
    </li>
    <li class="l1"><a href="assistance.php">Assistance</a></li>
    <li class="l1"><a href="technicien.php">Technicien</a>
      <ul class="sousmenu" id="menu2">
        <li><a href="">Test 1</a></li>
        <li><a href="">Test 2</a></li>
      </ul>
    </li>
    <li class="l1"><a href="contact.php">Administration</a></li>
    <li class="l1"><a href="contact.php">Contact</a></li>
    <li class="l1">
      <input type="search" id="search" placeholder="Rechercher" size="20">
    </li>
  </ul>
</div>

Le CSS a été modifié lui aussi:

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
#menu {
	width: 1000px;
	margin: 0px
}
#menu>ul{
	width: 1000px;	
}
#menu ul {
	list-style-type: none;
	height: 38px;
	background: #e3e3e3;
	background: -moz-linear-gradient(top, #ccc, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 2px #333;
	margin: 0px;
	position: absolute;
	margin: 0;
	padding: 0;
}
#menu ul li.l1 {
	display: inline;
}
#menu ul>li.l1>a {
	float: left;
}
#menu ul>li.l1 a {
	padding: 10px 20px 10px 20px;
	color: #454545;
	font-size: 15px;
	color: #ddd;
	text-decoration: none;
}
#menu ul>li.l1>a:hover {
	padding: 10px 20px 10px 20px;
	list-style-type: none;
	color: #ddd;
	text-shadow: 0 1px 0 black;
	background: #555;
	background: -moz-linear-gradient(top, #444, #555);
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}
#menu ul ul.sousmenu {
	display: none;
	position: absolute;
	top: 37px;
	float: none;
	text-align: center;
}
 
#menu ul li:hover ul.sousmenu {
	display: block;
}
#menu ul.sousmenu>li a:hover {
	color: black;
}

Maintenant, très simple de placer les sous-menus, on rajoute à la fin du CSS:

Code css :

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

1
2
3
4
5
6
7
8
#menu1{
	left:40px;
	width: 100px;
}
#menu2{
	left:245px;
	width: 105px;
}

Essayez de rajouter un sous-menu, ça devrait marcher nickel

**Jeremy60500** · 02/05/2013, 13h45

Ah oui merci, je n'y avais pas pensé ! Merci beaucoup c'est top

**saymoneu** · 02/05/2013, 13h48

Avec plaisir

Sous menu CSS3

CSS

Discussions similaires

Partager

Partager