Créer un menu accordéon avec le menu libre

Comment créer un menu accordéon via la fonction menu libre proposée par Wifeo. Vous trouverez dans cette documentation le script de base pour créer votre menu accordéon. Adaptez ce script pour arriver au résultat souhaité.

1. Comment créer un menu libre
2. Description du menu accordéon
3. Script pour créer un menu accordéon
4. Personnalisation du menu accordéon

Voici la documentation expliquant comment créer un menu libre pour faire un menu accordéon totalement personnalisé :
http://www.wifeo.com/documentation-74.html

Un menu accordéon est composé de rubriques et de sous menu.

Une rubrique contient un certain nombre de sous menu.

Les sous menu sont des liens vers vos pages.

A l'affichage de votre page, toutes les rubriques sont fermées, lorsque le visiteur clique sur une rubrique, les sous menu se déroulent sous la rubrique.

Voici le script à reproduire dans votre zone menu libre (en cliquant sur le bouton "SOURCE", pour chaque rubrique de votre menu déroulant :


PARTIE 1 DU SCRIPT (à mettre une fois seulement, en haut du menu) :
<script type="text/javascript">
function ACTIONMENUACORDION (obj)
{
var nbSsmenu = SOUSMENUACORDIONOUVERT.length;
for (ix = 0; ix < nbSsmenu; ix++)
{
if(SOUSMENUACORDIONOUVERT[ix]==true && obj!=ix)
{
document.getElementById('SSMENUACORDION['+ix+']').style.display='none';
SOUSMENUACORDIONOUVERT[ix]=false;
}
}

if(SOUSMENUACORDIONOUVERT[obj]!=true)
{
document.getElementById('SSMENUACORDION['+obj+']').style.display='block';
SOUSMENUACORDIONOUVERT[obj]=true;
}
else
{
document.getElementById('SSMENUACORDION['+obj+']').style.display='none';
SOUSMENUACORDIONOUVERT[obj]=false;
}

}
var SOUSMENUACORDIONOUVERT=new Array();
</script>



PARTIE 2 DU SCRIPT (à reproduire pour chaque rubrique) :


<table border="0" cellpadding="0" cellspacing="0" style="width:160px; background-color:#F2F2F2; height:40px; cursor:pointer;">
<tr><td style="text-align:center;" onclick="ACTIONMENUACORDION('0')">
TITRE DE MA RUBRIQUE
</td></tr>
<tr><td style=" text-align:center; " valign="top">
<div id="SSMENUACORDION[0]" style="display:none" >
<p style="text-align:center;"><a href="ADRESSE DE LA PAGE 1">NOM PAGE 1</a></p>
<p style="text-align:center;"><a href="ADRESSE DE LA PAGE 2">NOM PAGE 2</a></p>
<p style="text-align:center;"><a href="ADRESSE DE LA PAGE 3">NOM PAGE 3</a></p>
</div>
</td></tr></table>
<script type="text/javascript">
SOUSMENUACORDIONOUVERT[0]=false;
</script>

Placez la partie 1 du script une seule fois, en haut du menu (au dessus de la première rubrique).

Vous allez ensuite reproduire la partie 2 de ce script pour chaque rubrique de votre menu accordéon avec ses sous menus.

IMPORTANT : a chaque fois que vous ajoutez une rubrique dans le menu accordéon, ajoutez 1 au chiffre qui est en rouge (ci dessous 0).
Ainsi, si vous mettez une autre rubrique dans votre menu accordéon en dessous de cette ci, pour cette seconde rubrique vous remplacerez les 0 rouge par des 1, et ainsi de suite.

Il ne faut pas que deux rubriques aient le même numéro (ceci est très important).


Ce script donnera :

TITRE DE MA RUBRIQUE

NOM PAGE 1 NOM PAGE 2 NOM PAGE 3

En partant de ce script de base, vous pouvez personnaliser votre menu accordéon comme vous le désirez.

Changer les couleurs, mettre des images, augmenter/diminuer les tailles de caractères, etc...

Pour cela, modifiez les informations qui sont en vert ci dessus :
160 : largeur de la rubrique (et des sous menu)
40 : hauteur de la rubrique