Contenu qui se déroule via le menu
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:
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:
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> </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