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

Comment créer un menu déroulant horizontal via la fonctionnalité menu libre de Wifeo. Vous permettre de créer un menu déroulant horizontal en vous fournissant le script de base que vous pourrez ensuite personnaliser.

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

Voici la documentation qui vous permettra de savoir comment créer un menu libre pour votre site :
http://www.wifeo.com/documentation-74.html

Un menu déroulant horizontal est composé de rubriques et de sous menu.

Une rubrique contient des sous menu sur lesquels les visiteurs vont cliquer.

Les sous menu sont des liens directs vers vos pages.

Au chargement de votre page, toutes les rubriques de votre menu sont fermées, lorsque le visiteur passe la souris sur une rubrique les sous menu se déroule sous la rubrique à laquelle il est lié.

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

<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></tr><tr><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 du menu déroulant, avec ses sous menus.

IMPORTANT : chaque fois que vous ajouterez une nouvelle rubrique, augmentez de 1 le chiffre qui est en rouge (ci dessus 0).
Ainsi, si vous mettez une autre rubrique à côté de celle ci, pour cette seconde rubrique vous remplacerez les 0 rouge par des 1

Attention, il ne faut pas que deux rubriques de votre menu déroulant aient le même numéro.


Ce script donnera la rubrique déroulante suivante :

TITRE DE MA RUBRIQUE

NOM PAGE 1 NOM PAGE 2 NOM PAGE 3

A partir de cette base (voir paragraphe précédent), vous pouvez personnaliser votre menu déroulant horizontal comme vous le désirez.

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

Pour cela, modifiez ou ajoutez 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