[CSS]Menus et sous menus

**Laeticia** · 07/11/2005, 13h18

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)

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

:lol

voilà merci encore de votre aide

Laeticia

**hunter** · 07/11/2005, 14h26

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

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

il failait refaire un

Code :

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

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

**Laeticia** · 09/11/2005, 19h10

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

Code :

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

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

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

Merci de vos réponses

**hunter** · 10/11/2005, 08h53

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

**declencher** · 10/11/2005, 17h04

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 ?

[CSS]Menus et sous menus

CSS

Discussions similaires

Partager

Partager