Rendre visible ou non via une CSS

**Delphi-ne** · 09/06/2010, 09h43

Bonjour

Je voudrais construire une page semblable à ceci :

rubrique 1
- détail 1/1
- détail 1/2
- détail 1/3
rubrique 2
- détail 2/1
- détail 2/2
- détail 2/3
etc

Rubrique 1 et Rubrique 2 sont des liens hypertexte et le fait de cliquer dessus rend visible ou non les lignes de détail.
Jusqu'à présent j'utilise de Javascript. J'enferme mes lignes de détail dans une balise DIV et je modifie la propriété display du DIV

Là je n'ai pas le droit d'utilisé javascript.
Je pense qu'il faut me rabattre sur la CSS mais je ne vois pas comment faire.

Merci d'avance de votre aide

**pop_up** · 09/06/2010, 11h38

Je vois mal comment tu peux faire sans javascript à part faire un lien vers une nouvelle page ou le detail sera affiché ou non

Tu dis toi même :

le fait de cliquer dessus rend visible ou non les lignes de détail

Du coup, on parle bien d'évènement onclick.
Si tu veux faire ça coté serveur, tu peux voir du coté de php en passant un paramètre dans ton lien (en GET par exemple) qui te ferait recharger ta page en spécifiant d'afficher ton bloc détail

**Delphi-ne** · 09/06/2010, 12h39

Merci pour la réponse.

J'ai trouvé ce lien http://http://css.developpez.com/tut...enu-deroulant/

L'idée est d'utiliser les listes (balises <ul> et <li>)
Effectivement cela ne fonctionne pas avec le clic mais le passage de la souris.
Ca aurait été mieux mais rien n'est parfait.

Voici le code que cela donne :

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
126
127
128
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
	<title>Testos</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="robots" content="all" />
	<style>
		body {	font: 11px verdana, sans-serif;
			background: #AFA99B;
			margin: 0;
			padding: 0;}
 
		/* Elements de premier niveau
		--------------------------------------*/
		#menuDeroulant		{
			background: #6A6458;
			width: 644px;
			height: 21px;
			list-style-type: none;
			margin: 0;
			padding: 0;
			border: 0;
		}
		#menuDeroulant li		{		
			width: 644px;
			margin: 0;
			padding: 0;
			border: 0;
		}
		#menuDeroulant li a:link, #menuDeroulant li a:visited		{
			display: block;
			height: 1%;
			color: #FFF;
			background: #3B4E77;
			margin: 0;
			padding: 4px 8px;
			border-right: 1px solid #fff;
			text-decoration: none;
		}
		#menuDeroulant li a:hover { background-color: #F2462E; }
		#menuDeroulant li a:active { background-color: #5F879D; }
 
		#menuDeroulant .sousMenu		{
			display: none;
			list-style-type: none;
			margin: 0;
			padding: 0;
			border: 0;
		}
		#menuDeroulant .sousMenu li		{
			float: none;
			margin-left: 50px;
			padding: 0;
			border: 0;
			width: 500px;
			border-top: 1px solid transparent;
			border-right: 1px solid transparent;
		}
		#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited		{
			display: block;
			color: #FFF;
			margin: 0;
			border: 0;
			text-decoration: none;
			background: transparent url("fondTR.png") repeat;
		}
		#menuDeroulant .sousMenu li a:hover		{
			background-image: none;
			background-color: #F2462E;
		}
 
		#menuDeroulant li:hover > .sousMenu { display: block; }	
	</style>
	<title="default" media="screen" />
</head>
 
<body>
	l1<br>
	2111111<br>
	<br><br>
	<ul id="menuDeroulant">
		<li>
			<a href="#">Rubrique 1</a>
			<ul class="sousMenu">
				<li><a href="#">
					ligne 11<br/>
					ligne 12<br/>
					ligne 13<br/>
				</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Rubrique 2</a>
			<ul class="sousMenu">			      
				<li><a href="#">
					ligne 21<br/>
					ligne 22<br/>
					ligne 23<br/>
				</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Rubrique 3</a>
			<ul class="sousMenu">			      
				<li><a href="#">
					ligne 31<br/>
					ligne 32<br/>
					ligne 33<br/>
				</a></li>
			</ul>
		</li>
		<li>
 
			<a href="#">Partie 4</a>
			<ul class="sousMenu">			      
				<li><a href="#">
					ligne 41<br/>
					ligne 42<br/>
					ligne 43<br/>
				</a></li>
			</ul>
		</li>
	</ul>
 
</body>
</html>

**Bisûnûrs** · 09/06/2010, 13h22

Attention, ce code ne fonctionne pas sur IE6 et inférieurs.

Rendre visible ou non via une CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager