Créer un menu déroulant vertical avec le menu libre

Comment créer un menu déroulant vertical via la fonction de menu libre de Wifeo. Cette documentation vous permet de créer votre menu déroulant en vous fournissant le script de base.

1. Comment créer un menu libre
2. Description du menu déroulant vertical
3. Script pour créer un menu déroulant vertical
4. Personnalisation du menu déroulant vertical

Voici la documentation expliquant comment créer un menu libre :
http://www.wifeo.com/documentation-74.html

Un menu déroulant 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 la souris passe sur une rubrique les sous menu deviennent visibles a côté de 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 :

<table border="0" cellpadding="0" cellspacing="0" style="width:160px; background-color:#F2F2F2; height:40px; cursor:pointer;" onmouseover="javascript:getElementById('idcadre0').bgColor='#FF6600'; javascript:getElementById('ssmen0').style.display='block';" onmouseout="javascript:getElementById('idcadre0').bgColor='#F2F2F2'; javascript:getElementById('ssmen0').style.display='none'; ">
<tr><td style="text-align:center;" id='idcadre0'>
TITRE DE MA RUBRIQUE
</td><td style=" text-align:center; " valign="top"><div style="display:none; z-index:900; position:absolute;" id="ssmen0" ><table border='0' cellpadding='0' cellspacing='0' width='207' style=" background-color:#FF6600;"><tr><td style='border: 0px 0px 0px 0px;'>
<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>
</td></tr></table>
</div>
</td></tr>
</table>


Vous allez reproduire ce script pour chaque rubrique avec ses sous menus.

IMPORTANT : a chaque fois que vous ajoutez une rubrique, ajoutez 1 au chiffre qui est en rouge (ci dessous 0).
Ainsi, si vous mettez une autre rubrique en dessous de cette ci, pour cette seconde rubrique vous remplacerez les 0 rouge par des 1

Il ne faut pas que deux rubriques aient le même numéro.


Ce script donnera :

TITRE DE MA RUBRIQUE

NOM PAGE 1 NOM PAGE 2 NOM PAGE 3

A partir de cette base, vous pouvez ensuite personnaliser votre sous menu 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
40 : hauteur de la rubrique
#F2F2F2 : couleur de fond de la rubrique
#FF6600 : couleur de fond au passage de la souris
207 : largeur des sous menu