Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations




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


Niveau de difficulté : moyen
Temps nécessaire : 30 minutes
Logiciel requis : -


But de l'explication:
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é.


Sommaire :
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


1. Comment créer un menu libre
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


2. Description du menu accordéon
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.


3. Script pour créer un menu déroulant vertical
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


4. Personnalisation de votre menu accordéon
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

 


 

Dans le forum...


 
 

Autres documentations liées


• Créer un menu déroulant horizontal avec le menu libre
Extrait :
[i][color=green]Niveau de difficulte : moyen Temps necessaire : 10 minutes Logiciel requis : -[/color][/i] [color=orange][size=18]But de l'explication:[/size][/color] [list]Comment creer un menu deroulant horizontal via la fonctionnalite menu libre de Wifeo. Vous permettre de creer un menu...
Sommaire :
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

 
• Créer un menu déroulant vertical avec le menu libre
Extrait :
[i][color=green]Niveau de difficulte : moyen Temps necessaire : 10 minutes Logiciel requis : -[/color][/i] [color=orange][size=18]But de l'explication:[/size][/color] [list]Comment creer un menu deroulant vertical via la fonction de menu libre de Wifeo. Cette documentation vous permet de...
Sommaire :
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

 
• Qu`est ce que le menu libre
Extrait :
[i][color=green]Niveau de difficulté : Facile Temps nécessaire : 1 minutes Logiciel requis : -[/color][/i] [color=orange][size=18]But de l'explication:[/size][/color] [list]Savoir ce qu'est le menu libre de Wifeo, comment il fonctionne est quels sont ses avantages[/list] ...
Sommaire :
1. Qu'est ce que le menu libre ?
2. Comment créer un ou des menus libres
3. Avantages et inconvénients du menu libre

 
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES