Pour toute question concernant ce tutoriel, ouvrez un sujet avec votre question et un lien vers le présent tutoriel dans la section suivante, merci : Aide CSS&HTML
Créer un Accordéon
Niveau:
Difficile | Par:
Kaiji | Validé par:
Kaiji | En date du:
17/06/2010Bonjour !
Dans ce tutoriel, je vais vous apprendre à effectuer un accordéon (dans votre page d'accueil uniquement). Vous y trouverez l'exemple dans le lien suivant, qui est le lien créateur du script :
http://www.dynamicdrive.com/dynamicindex17/haccordion.htm
L'accordéon est la création de Dynamic Drive, ce script n'appartient pas à CSSActif.
Je tiens à préciser, avant même de commencer, que ce code n'est
pas valide sous
Internet Explorer !
{ I - Le CSS
Comme tout script, l'Accordéon a un CSS qui lui est propre. Dans un premier temps, il vous faudra donc mettre le code suivant dans votre feuille de style (CSS) et l'arranger selon vos goûts.
- Code:
-
.haccordion{
padding: 0;
width: 800px;
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 20px;
overflow: hidden;
float: left;
}
#hc1 li{
margin:0 0px 0 0;
width: 800px;
}
#hc1 li .hpanel{
padding: 0px;
background: transparent;
}
.haccordion li .hpanel{
width: 20px;
height: 20px;
}
#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}
width: 800px; représente la longueur maximale de votre accordéon, lorsqu'un panneau est ouvert et les autres repliés. Veillez à ne pas mettre une valeur trop grande car ça déformerait votre page, et n'en mettez pas une trop petite non plus si vous ne souhaitez pas voir votre accordéon coupé de manière très inesthétique...
overflow: hidden; / display: block; / float: left; sont 3 valeurs qu'il ne faut surtout pas toucher, puisqu'elles représentent l'emplacement de l'accordéon (la superposition des images, etc...)
Margin et
padding représentent l'espace entre les différents panneaux de l'accordéon. Si vous n'en voulez pas, laissez tout simplement 0px.
.haccordion li représente l'apparence globale de l'accordéon, à vous de modifier les valeurs de
height (hauteur) et
width (longueur) selon ce que vous voulez.
hpanel apparaît lorsque le panneau est ouvert.
Haccordion li .hpanel correspond donc à l'apparence globale de l'accordéon une fois un panneau ouvert, et
hc1 li .hpanel correspond à l'apparence d'un panneau lorsqu'il est ouvert. A vous de jouer, encore une fois, avec
width et
height.
C'est tout pour la partie CSS, mais il nous reste encore 3 parties à voir.
{ II - La Page HTML
La page HTML se trouve dans PA > Modules > Gestion de pages HTML
Créez-en une nouvelle, et copiez/collez le code suivant sans y apporter la moindre modification :
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<!--Make sure your page contains a valid doctype at the very top-->
<link rel="stylesheet" type="text/css" href="haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">
/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<style type="text/css">
/*CSS for example Accordion #hc1*/
#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}
#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}
/*CSS for example Accordion #hc2*/
#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}
#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}
</style>
<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
haccordion.setup({
accordionid: 'hc2', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
selectedli: [-1, true], //[selectedli_index, persiststate_bool]
collapsecurrent: true //<- No comma following very last setting!
})
</script>
<script type="text/javascript" src="
http://pmsc.free.fr/J03/1045165647.js"></script>
</script>
</body>
</html>
C'est tout pour la page HTML. Ca va, pas trop dur ! =)
{ III - La Page d'Accueil
Bien sûr, il faut bien que le code apparaisse, et donc que l'accordéon soit codé quelque part... Et bien c'est dans la page d'accueil de votre forum. Sous-catégorie "Généralités" dans l'onglet "Affichage" de votre panneau d'admin.
Collez-y ce code :
- Code:
-
<div class="gensmall"><script type="text/javascript">haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})</script><div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width:VALEURpx; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="IMAGE" alt=""></a></div></li></ul></div>
Dans ce code, nous n'allons modifier que ceci
paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'}, et ceci :
- Code:
-
<li style="overflow: hidden; width:VALEURpx; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="IMAGE" alt=""></a></div></li>
paneldimensions correspond aux dimensions des panneaux :
peekw = largeur lorsque le panneau est fermé
fullw = largeur lorsque le panneau est ouvert
h = height = hauteur
Le deuxième code correspond au code d'un panneau (n'oubliez pas de modifier "VALEUR" qui correspond encore une fois à la largeur totale du panneau). Pour rajouter un panneau, il vous faut copier/coller ce code-là autant de fois que vous voulez de panneau, entre :
- Code:
-
<div id="hc1" class="haccordion"><ul></ul></div>
Notez que vous pouvez retirer
- Code:
-
<a href="LIEN" target="_blank"></a>
si vous ne souhaitez pas introduire de lien dans votre panneau, et que vous pouvez y mettre Image + TEXTE en modifiant ceci
- Code:
-
<img src="IMAGE" alt="">
par ceci
- Code:
-
<img src="IMAGE" style="float:left; padding-right:8px; width:LARGEUR DE L'IMAGEpx; height:HAUTEUR DE L'IMAGEpx" />BLABLABLABLABLA
Sinon vous pourrez complètement enlever
- Code:
-
<img src="IMAGE" alt="">
si vous ne voulez pas d'image dans votre accordéon.
Voilà pour la page d'accueil ! Et maintenant, la dernière partie.
{ IV - Le script
Afin que le coulissement fonctionne, il faut bien sûr placer un script dans un template. Rendez-vous sur http://www.dynamicdrive.com/dynamicindex17/haccordion.htm et cliquez sur
- Citation :
- haccordion.js (one variable near the top inside this file you should customize)
Une série de codes apparaissent alors à votre écran. Copiez/collez le tout dans le bloc-note et enregistrez votre fichier au format .js
Rendez-vous ensuite sur un site d'hébergement acceptant le format Javascript, par exemple https://www.archive-host.com , inscrivez-vous et hébergez votre fichier. Prenez le lien qu'il vous donne, puis rendez-vous dans les templates de votre forum (onglet affichage). Dans le template "Overall_header_new" cherchez la balise
- Code:
-
</head>
et juste avant, collez ce code-ci en y mettant votre lien archive-host (ou autre, selon l'hébergeur)
- Code:
-
<script type="text/javascript" src="TON LIEN ARCHIVE HOST"></script>
Enregistrez, publiez le template, et votre accordéon est fait !
Sam 30 Mar 2024, 22:07 par 
