Discussion :

[bigltnt]

Bonjour,

Je souhaite réaliser un menu dépliant en CSS par la propriété over. Mon menu se trouve à gauche, les rubriques pointées dépliant les sous-rubriques en colonnes, et ces memes sous-rubriques doivent en déplier d'autres, mais cette fois-ci sur la droite:
----------------
|~~Menu~~~~|
---------------
|~Rubrique~~~|
|~~S-rubrique~|
|~~S-rubrique~~SS-rubrique
|~~~~~~~~~~SS-rubrique
|_____________|

Pour ce faire, je suppose que mes SS-rubriques doivent être en position relative pour se placer par rapport à leur S-rubrique, mais en meme temps, il faut qu'elles soient en position absolue pour se placer par dessus le menu et ne pas agrandir mon menu qui décalerai mon div de contenu, placé juste à droite du menu.

Comment faire ???


Car en position absolue, mes SS-rubriques se chevauchent, et cela m'oblige à faire des id plutot que des classes (donc une pour chaque SS-rubrique, c'est ennuyant ...).

Voici mon code html et CSS actuels, les classes réalisées se basant sur les <ul>:

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
<div id="menu">
	<ul class="niveau1">
 
		<li> Annuaire 
			<ul class="niveau2">
				<li><a href="index.php?page=groupe">Consulter</a></li>
				<li><a href="index.php?page=groupe&action=creer">Rechercher</a></li>
			</ul>
		</li>
		<li> Patrimoine 
			<ul class="niveau2">
				<li><a href="index.php?page=rubrique">Lister</a></li>
				<li><a href="index.php?page=rubrique&action=creer">Creer</a></li>
			</ul>
		</li>
		<li> News 
			<ul class="niveau2">
				<li>Sens
					<ul class="niveau3">
						<li><a href="">Consulter</a></li>
						<li><a href="">Ecrire</a></li>
					</ul>
				</li>
				<li>Auxerre
				</li>
			</ul>
		</li>
	</ul>
</div>

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
#menu {
	width: 160px;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
	color: red;
	font-weight: bold;
	border: 2px solid green;
	border-top: none;
}
 
#menu ul {
	list-style-type: none;
	margin-left: 0;
}
 
ul.niveau1 li {
	width: 132px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("img/bouton1.jpeg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin-top: 20px;
}
ul.niveau1 li:hover  ul.niveau2 {
	display: block;
}
 
ul.niveau2 {
	display: none;
	margin: 0;
	padding: 0;
}
 
ul.niveau2 li{
	width: 132px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("img/bouton1.jpeg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin: 10px;
	padding: 4px;
}
 
ul.niveau2 li a, ul.niveau2 li a:link, ul.niveau2 li a:visited{
	color: green;
	display: block;
	text-decoration: none;
}
 
ul.niveau3 {
	margin: 0;
	padding: 0;
	display: none;
}
 
ul.niveau2 li:hover  ul.niveau3 {
	display: block;
}

Comment gérer le ul.niveau3 ???

Merci de vos remarques et réponses !

[Bisûnûrs]

Est-ce ça que tu souhaites :
http://developpez.net/forums/showpos...5&postcount=83
?

[bigltnt]

Et bien en fait je souhaiterais plutôt ne pas avoir de javascript pour 2 raisons:

1) Je n'y connais pas grand chose (je suis déjà en apprentissage de CSS, php, mysql, avec javascript ca sera de trop )
2) L'administrateur ne veut pas de modification des postes et browser des clients de l'intranet (CSS avec IE6, c'est pas de la tarte lol ! Vive les behavior ! ).

Donc si possible la solution tout en CSS ! Si c'est pas possible alors ca risque d'etre trèèèèèèèèèèès compliqué pour moi

Pfff pas facile ...

[Bisûnûrs]

Je vois ...

Tu peux mettre position:relative à ton <li> du niveau 1, comme ça déjà tu pourras positionner en absolu le niveau 2 et donc le niveau 3 ...

[bigltnt]

Ouio c'est vrai que le 1er <li> en relatif c'est déjà mieux. Mais le chevauchement des 3ème niveau ne s'arrange pas.

En fait, petite question: ca n'existe pas les classes avec un "position: absolute" ? Car tout les éléments de la même classe se superposeront non ?

Car en effet, si je veux mettre en absolue mes 3èmes niveaux, il faudra que je leur donne des coordonnées différentes, et donc je pert l'interet des classes, et par la meme occasion de mes listes ...

Ou y'a ptet un truc que je n'ai pas saisi ?

[Bisûnûrs]

En fait, quand tu positionnnes un élément en absolute, il se positionne par rapport à son parent positionné, à défaut, le body.

Donc si tu positionnes en absolu ton niveau 2, ton niveau 3 se positionnera automatiquement par rapport au niveau 2, vu qu'il est positionné. Il n'a pas besoin d'être en relative.