Sweet Purple
Admin
Messages : 131
Date d'inscription : 12/07/2010
Age : 29
 | Sujet: Onglets coulissants. Bazzart  Dim 4 Sep - 12:11 | |
| - le Sha a écrit:
- le sha a écrit:
Bon, j'ai réussi. Enfin. XD
Donc, côté CSS ça donne :
- Code:
-
/* Horizontal Accordion */
.haccordion{
padding: 0;
width: 800px;
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*on touche pas*/
}
.haccordion li{
margin: 0;
padding: 0;
display: block; /*on touche pas*/
width: 100%; /*comme tu préfères cay la hauteur*/
height: 50px; /*comme tu préfères cay la longueur*/
overflow: hidden; /*on touche pas*/
float: left; /*on touche pas*/
}
/*CSS for example Accordion #hc1*/
#hc1 li{
margin:0 0px 0 0; /*espace entre chaque contener*/
width: 800px;
}
#hc1 li .hpanel{
padding: 0px; /*espace entre chaque content*/
background: transparent;
}
.haccordion li .hpanel{
width: 100%; /*comme tu préfères cay la hauteur*/
height: 50px; /*comme tu préfères cay la longueur*/
}
Et côté HTML (tu colles ça dans la zone "PA", tout en haut) :
- Code:
-
<div class="gensmall"><script type="text/javascript">haccordion.setup({ accordionid: 'hc1', //main accordion div id paneldimensions: {peekw:'118px', fullw:'210px', h:'50px'}, selectedli: [0, true], //[selectedli_index, persiststate_bool] collapsecurrent: false //<- No comma following very last setting! })</script><style type="text/css"> #hc1 li{width: 118px; height: 50px; } #hc1 li .hpanel{width: 210px; height: 50px; } </style><div id="hc1" class="haccordion"><ul> <li style="overflow: hidden; width: LONGUEURpx; display: block;"><div class="hpanel"><a style="opacity: 0.2;" href="LIEN URL" class="gradualfader" target="_blank"><img src="LIEN IMAGE" alt=""></a></div></li> <li style="overflow: hidden; width: LONGUEURpx; display: block;"><div class="hpanel"><a style="opacity: 0.2;" href="LIEN URL" class="gradualfader" target="_blank"><img src="LIEN IMAGE" alt=""></a></div></li> <li style="overflow: hidden; width: LONGUEURpx; display: block;"><div class="hpanel"><a style="opacity: 0.2;" href="LIEN URL" class="gradualfader" target="_blank"><img src="LIEN IMAGE" alt=""></a></div></li> <li style="overflow: hidden; width: LONGUEURpx; display: block;"><div class="hpanel"><a style="opacity: 0.2;" href="LIEN URL" class="gradualfader" target="_blank"><img src="LIEN IMAGE" alt=""></a></div></li> <li style="overflow: hidden; width: LONGUEURpx; display: block;"><div class="hpanel"><a style="opacity: 0.2;" href="LIEN URL" class="gradualfader" target="_blank"><img src="LIEN IMAGE" alt=""></a></div></li> <li style="overflow: hidden; width: LONGUEURpx; display: block;"><div class="hpanel"><a style="opacity: 0.2;" href="LIEN URL" class="gradualfader" target="_blank"><img src="LIEN IMAGE" alt=""></a></div></li></ul></div>
Et ensuite, plus dur, il faut que tu c/c ce code sur un BLOC NOTE, que tu le travailles comme tu le désires, que tu l'enrengistres en " .js ", par exemple BLABLA.js et, tu l'héberges ce CODE est hyper important! ça sera lui qui fera que tes onglets glisseront! Quand tu as ce code, tu le colle au dessus de tout ça :
- Code:
-
<script type="text/javascript" src="LIEN script"></script>
Pour exemple de script, tu as celui de (c)FYA, ici : http://fyalicious.free.fr/haccordion.js, ou encore celui du site proposé par Chouquette, ici : http://www.dynamicdrive.com/dynamicindex17/haccordion.js. Le travail d'un code script n'est pas dur si tu as quelques bases en anglais. Au pire des cas, si tu rencontres un problème, pose la question, ça sera plus simple que de bidouiller et de tout massacrer. (; Bref. Une fois que tu as ça, tu as déjà tes onglets. Si en plus tu veux qu'ils deviennent transparents etc, tu dois entrer le script GRADUALFADER comme (c)FYA la fait, comme ça :
- Code:
-
<script type="text/javascript" src="http://fyalicious.free.fr/gradualfader.js"></script>
Tu trouves donc le script de (c)FYA ici : http://fyalicious.free.fr/gradualfader.js que tu trouves également ici : http://www.dynamicdrive.com/dynamicindex11/gradualfader.js.
Voilà voilà! (;
Si besoin, j'en ferais un tuto plus long et mieux expliqué. Par flemme de mettre ça au propre, si vous voulez, je le refais ce poste. En plus clair. Et en plus soigné.
Normalement tu devrais les trouvés les codes JS ici
http://www.dynamicdrive.com/dynamicindex17/haccordion.htm
et ici
http://www.dynamicdrive.com/dynamicindex11/gradualfader.htm
| |
|
