Contenu qui se déroule via le menu

**MrTitomy** · 18/02/2011, 16h09

Bonjour le monde,

Le titre n'est peu être pas clair je m'en excuse mais je ne voyais vraiment pas comment le dire autrement.

Voila mon problème : J'ai une page simple avec à droite un menu composé d'onglets verticaux et au centre mon bloc principal. Chaque onglet à des sous parties qui se retrouve dans mon bloc principal.
Quand je clic sur une sous partie dans le bloc le contenu,qui lui est lié, se déroule. Jusqu'ici tranquille ^^.

Mon problème est le suivant : je souhaiterais que quand je clic sur une sous partie dans le menu le contenu de la sous partie qui se situe dans le bloc se déroule mais je n'arrive pas à voir comment je dois procéder ...

j'espère que vous pourrez éclaircir mon esprit en tout cas merci d'avance.
Voila mon code :

CSS

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
 
body {
	color: #0066ff;
	background: #d5e4fd;
}
/* Navigation */
 
.ongletactif {
	background-color: #D8F0FE;
}
.souspartie {
	font-size: 0.8em;
	color: #000;
	padding-left: 10px;
	background-color: #D8F0FE;
}
.onglet {
	background:#7e9cf4;
}
/* Contenu principal */
#contenu {
	color: #0066FF;
	background: #D8F0FE;
}
 
/* --- POSITIONNEMENT --- */
/* Page */
.soustitre {
	margin-left: 60px;
	font-size: 1.3em;
	margin-top: 40px;
	color: #03F;	
}
/* Menu de navigation */
#navigation {
	width: 180px; /* -> 4 */
	float: left;
	height: 85,2px;
}
#navigation ul {
	margin: 0;
	padding: 0px 0px;
	list-style: none;
}
#navigation a {
	display: block;
	height: 30%; /* -> 5 */
	padding: 6px 6px 6px 10px;
	line-height: 1.2;
	font-size: 0.9em;
	text-decoration: none;
}

html :

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
<!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="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="styles/modele05.css" media="screen" />
</head>
 
<body>
 
<div id="global">
	<div id="navigation" >
		<ul>
			<li class="onglet"><a href="1" ><center>1</center></a></li>
            <li class="onglet"><a href="2" ><center>2</center></a></li> 
			<li class="onglet"><a href="3.html" ><center>3</center></a></li>
            <li class="onglet"><a href="4.html"><center>4</center></a></li>
			<li class="ongletactif"><a href="5.html"><center>5</center></a></li>
            <div class="souspartie">
                  <ul >
                  	<li>Une truite</li>
                    <li>2eme sous partie</li>
                  </ul>
                  </div>
	  </ul>
	</div><!-- #navigation -->
 
	<div id="contenu">
		<h3>5</h3>	      
 
      	<a onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;" class="soustitre" >Une truite</a ><div style="display: none;" class="texteac" >
		Les poissons ! LES PETITS POISSONS ! 
 
	  	</font></div>
 
        <p>&nbsp;</p> 
 
        <a onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');" href="javascript:;" class="soustitre" >2eme sous partie</a ><div style="display: none;" class="texteac" >
		Blablablablablablablablablablablablablablablablablablablablablablablablabla
 
		</font></div>
 
</div><!-- #contenu -->
</div><!-- #global --> 
</body>
</html>

Ps : j'adore le bleu

**NoSmoking** · 19/02/2011, 14h45

Bonjour,
pas sûr mais

Code :

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

<li onclick="document.getElementById('div_poisson').style.display='block';">Une truite</li>

avec par exemple

Code :

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

1
2
3
<div id="div_poisson" style="display: none;" class="texteac" >
  Les poissons ! LES PETITS POISSONS !
</div>

Je te conseille de laisser tomber le this.nextSibling.style.display qui engendre des contrainte d'écriture de ton code HTML.
Passe par une fonction que tu pourra appeller en passant l'ID de l'élément à afficher/masquer.

**MrTitomy** · 19/02/2011, 17h36

Si je pouvais je te ferais la bise quoi ! C'est exactement ce que je souhaitais

Tu gère.
Tu viens de me débloquer tu peux pas savoir. avec ça je vais pouvoir développer exactement se que je voulais.
Pour la fonction je m'en charge.
Encore merci.

Contenu qui se déroule via le menu

JavaScript

Discussions similaires

Partager

Partager