Sous menu CSS3

Version imprimable

Sous menu CSS3

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:

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:

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:

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

02/05/2013, 10h00
Torgar
Salut,

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

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.
02/05/2013, 10h04
saymoneu
Et il faut aussi effectuer un traitement sur la liste de niveau 2 (après avoir correctement imbriqué comme l'a dit Torgar):
Code:

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

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:

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:

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

02/05/2013, 11h10
saymoneu
Ok, enlevez l'overflow:hidden dans "#menu ul" et complétez le "#menu ul ul" :
Code:

1 2 3 4 #menu ul ul{ display:none; top:37px; }
02/05/2013, 11h22
Jeremy60500

Génial :D

Dernière précision (je sais je suis chiant :oops:), 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 :ccool:

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

Code:

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:

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 :P.

02/05/2013, 13h26
Jeremy60500

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

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:

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:

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:

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

02/05/2013, 13h45
Jeremy60500

Ah oui merci, je n'y avais pas pensé ! Merci beaucoup c'est top :ccool:
02/05/2013, 13h48
saymoneu

Avec plaisir :)