[W3C] Menu arborescent fixe simple

**chillansky** · 26/09/2006, 16h47

bonjour, j'aimerais creer un menu arborscent simple et fixe comme ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
TEST
.
.....Mission
.
.....Histoire
.    .
.    .....yopla
.    .
.    .....qwailà
.
.....monqizue

Je pourrais très bien le faire avec des tableau mais je préfererais essayer avec les css. Mais les dans mes recherches je ne trouve que des choses bien complique qui ne correspondent pas à ce que je cherche.

D'avance merci ^^

**Bisûnûrs** · 26/09/2006, 16h49

Regarde du côté de la propriété CSS "display".

**chillansky** · 26/09/2006, 16h56

ben oui mais ça ne m'aide pas.
A noter que la mise en page devra ressembler quasimenet à ça (avec des points et tout et tout).
Mais dans mes essais je butes sur la mise en place des points ainsi que ces saloperies de marges IE vs FF

**Bisûnûrs** · 26/09/2006, 17h05

Code :

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

1
2
<div id="id1" onclick="affich()">TEST</div>
<div id="id2" style="display:none">Mission</div>

Code :

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

1
2
3
4
5
<script language="javascript">
function affich(){
   document.getElementById("id2").style.display = "block";
}
</script>

Je te laisse adapter et compléter ce code à ta convenance.

**chillansky** · 26/09/2006, 17h13

Argh je vois que je me suis fait mal comprendre

Je n'ai pas besoin de cacher le menu ou de faire apparaitre des morceau quand on clique dessus.
Moi je veux juste un affichage comme celui-là. En utilisant des ul et des li imbriqués pour obtenir ce résultats.
Mais je n'y arrive pas notement pour mettre des "."

La mise en page ressemblera quasi trait pour trait à ça. Je veux juste optimiser la chose en évitant de devoir creer un tableau ou mettre des bêtes points dans le code html

**Bisûnûrs** · 26/09/2006, 17h33

Oh, ok ! Au temps pour moi alors, j'avais mal compris, en effet.

Juste une chose : Les listes en CSS sont très chiantes, elles ne sont pas du tout interprétées de la même manière par IE et Firefox, notamment en ce qui concerne les margin et padding.

**chillansky** · 26/09/2006, 21h26

Que faire alors ?
Un menu avec plein de   et des '.' alors ?
Ca ne me semble pas très esthétique...

**croc14** · 26/09/2006, 23h38

imbriquer des listes dans une liste ca marche pas ?

Sinon tu defini un deuxieme style de puce qui sera plus décalé !!!

**Nesmontou** · 26/09/2006, 23h45

Salut, tu peux faire quelque chose de ce type

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
<html>
 
	<head>
 
	</head>
 
	<body>
 
		<ul>
			<li>
				TEST
				<ul>
					<li>Mission</li>
					<li>
						Histoire
						<ul>
							<li>yopla</li>
							<li>qwailà</li>
						</ul>
					</li>
					<li>monqizue</li>
				</ul>
			</li>
		</ul>
 
	</body>
</html>

Tu peux ensuite modifier le style, par exemple

Code :

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

1
2
3
ul {
	list-style-type: none;
}

pour enlever les puces

Bon développement

**ilood** · 27/09/2006, 00h02

Salut

Avec une petite recherche on trouve ceci aussi.
Il reste à changer le css pour afficher les bordures en pointillés.

**chillansky** · 27/09/2006, 09h38

Les listes imbriquée ça marche, mais comme IE et FF interprête ça complétement différement, ya des décalages partout.
Vivement que le navigateur le plus utilisé du monde soit conforme aux validations w3c ...
Vu, mais j'avoue que tout ces hack et la longeur du css me laisse perplexe.
Je crois que je vais passer par ces bon vieux tableaux.
Merci quand mêm ;-)

[W3C] Menu arborescent fixe simple

HTML

Discussions similaires

Partager

Partager