[CSS]Menus et sous menus

Version imprimable

Bonjour bonjour !

voilà je suis entrain d'essayer d'établir un menu en css, ainsi qu'un sous menu.

voici mon code (il y a peut être des erreurs des triffouilages qui ne vont pas)

:D

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
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
 
<style type="text/css">
 ul#navlist { font-family: sans-serif; }
 
ul#navlist a
{
font-weight: bold;
text-decoration: none;
}
 
ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
 
ul#navlist li { float: left; }
 
ul#navlist li a
{
color: #000;
padding: 20px;
border: 0px
}
 
ul#navlist li a:hover;
{
color: #ffff00;
background-color: #003366;
}
 
ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}
 
ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }
 
ul#subnavlist2 { display: none; }
ul#subnavlist2 li { float: none; }
 
ul#subnavlist li a
{
padding: 0px;
margin: 0px;
color: #ffffff;
background-color: #003366;
border: 1px #ffffff inset;
}
 
ul#subnavlist2 li a
{
padding: 0px;
margin: 0px;
margin-top: -23px;
margin-left: 124px;
}
 
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
 
ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 25em;
border: none;
padding: 2px;
}
 
ul#subnavlist li:hover ul#subnavlist2
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}
 
ul#subnavlist li:hover ul#subnavlist2 li a
{
display: block;
width: 20em;
border: none;
padding: 2px;
margin-left: 23px;
margin-top: 125px;
}
ul#subnavlist2 li ul#subnavlist li a:after { content: " >> "; }
 
ul#navlist li ul#subnavlist li a:before { content: " >> "; } </style> 
</head>
 
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Fichier</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Nouveau</a></li>
<li><a href="#">Ouvrir</a></li>
<li><a href="#">Ouverture rapide</a></li>
<li><a href="#">Fermer</a></li>
<li><a href="#">Fermer tout les fichiers</a></li>
<li><a href="#">Fermer tout, excepté le fichier courant</a></li>
<li><a href="#">FTP</a></li>
 
	<ul id="subnavlist2">
		<li><a href="#">Ouvrir (via FTP)...</a></li>
		<li><a href="#">Sauvegarde sous (via FTP)...</a></li>
	</ul>
 
<li><a href="#">Retourner à la derniere sauvegarde</a></li>

En fait j'aimerai faire donc un menu puis un sous menu subnavlist2.

Si possible sans javascript, mais si l'on est obligé de passer par du javascript, soit mais j'aimerai comprendre ce que j'écris :P

:lol

voilà merci encore de votre aide :)

Laeticia

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
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
<style type="text/css"> 
 
ul#navlist a 
{ 
font-weight: bold; 
text-decoration: none; 
} 
 
ul#navlist, ul#navlist ul, ul#navlist li 
{ 
margin: 0px; 
padding: 0px; 
list-style-type: none; 
} 
 
ul#navlist li { float: left; } 
 
ul#navlist li a 
{ 
color: #000; 
padding: 20px; 
border: 0px 
} 
 
ul#navlist li a:hover; 
{ 
color: #ffff00; 
background-color: #003366; 
} 
 
ul#navlist li a:active 
{ 
color: #cccccc; 
background-color: #003366; 
border: 1px #ffffff inset; 
} 
 
ul#subnavlist { display: none; } 
ul#subnavlist li { float: none; } 
 
ul#subnavlist2 { display: none; } 
ul#subnavlist2 li { float: none; } 
 
ul#subnavlist li a 
{ 
padding: 0px; 
margin: 0px; 
color: #ffffff; 
background-color: #003366; 
border: 1px #ffffff inset; 
} 
 
ul#subnavlist2 li a 
{ 
padding: 0px; 
margin: 0px; 
margin-top: -23px; 
margin-left: 124px; 
} 
 
ul#navlist li:hover ul#subnavlist 
{ 
display: block; 
position: absolute; 
font-size: 8pt; 
padding-top: 5px; 
} 
 
ul#navlist li:hover ul#subnavlist li a 
{ 
display: block; 
width: 25em; 
border: none; 
padding: 2px; 
} 
 
ul#navlist2 li:hover ul#subnavlist2 
{ 
display: block; 
position: absolute; 
font-size: 8pt; 
padding-top: 5px; 
} 
 
ul#navlist2 li:hover ul#subnavlist2 li a 
{ 
display: block; 
width: 20em; 
border: none; 
padding: 2px; 
margin-left: 23px; 
margin-top: 125px; 
} 
ul#subnavlist2 li ul#navlist2 li a:after { content: " >> "; } 
 
ul#navlist li ul#subnavlist li a:before { content: " >> "; } 
 
 
 
</style> 
 
 
<body> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li id="active"><a href="#" id="current">Fichier</a> 
<ul id="subnavlist"> 
<li id="subactive"><a href="#" id="subcurrent">Nouveau</a></li> 
<li><a href="#">Ouvrir</a></li> 
<li><a href="#">Ouverture rapide</a></li> 
<li><a href="#">Fermer</a></li> 
<li><a href="#">Fermer tout les fichiers</a></li> 
<li><a href="#">Fermer tout, excepté le fichier courant</a></li> 
<ul id="navlist2"> 
<li id="active"><a href="#" id="current">FTP</a>
   <ul id="subnavlist2"> 
      <li><a href="#">Ouvrir (via FTP)...</a></li> 
      <li><a href="#">Sauvegarde sous (via FTP)...</a></li> 
   </ul> 
</ul>   
<li><a href="#">Retourner à la derniere sauvegarde</a></li>   
</ul>
</ul>
</div>
</body>

wahou c'est chaud comme truc à faire

j'ai renomer quelque truc pour des testes et que ca fonctionne :D :D

il te reste a placer les éléments au bon endroit

il failait refaire un

Code:

1
2
3
 
<ul id="navlist"> 
<li id="active"><a href="#" id="current">Fichier</a>

pour avoir un "sous menu" pour le ftp

j'espère que ça t'aide

ps : c'est que compatible FF si jamais

09/11/2005, 19h10
Laeticia

Merci bien !!!
ca fonctionne parfaitement !!
alors que signifie

Code:

<li id="active"><a href="#" id="current">

-> ça correspond à quoi à part dire apparement que la li a un id appelé active ? :roll:

Merci de vos réponses ;)
10/11/2005, 08h53
hunter

a faire beau :p je sais pas vraiment avec ou sans ça ne change rien tu n'est pas obligé de les mettre à mon avis
10/11/2005, 17h04
declencher

Je pense que ça aide à préciser si on utilise le style de la class (#) ou de l'id (.) que l'on peut définir pour une même balise, non ?