Voici encore un menu en JavaScript... On peut facilement le modifier, et meme y ajouter des éléments une fois la page chargée (je n'ai pas encore fait la suppression, mais ca viendra peut etre).
Les couleurs de départ des cellules sont fixées dans des variables au début du fichier .js.
C'est tres simple, mais je vais encore l'améliorer... j'attend vos suggestions.
Source / Exemple :
//Définition des variables
var Tableau=new Liste();
var Affichage,Time;
Tableau.Nombre=0;
Tableau.HzVt=1;
Tableau.Timer=1;
Tableau.TOut=2000;
Tableau.MOut="#FFF8F0";
Tableau.MOver="#FFF8F0";
Tableau.SMOut="#F0FFF0";
Tableau.SMOver="#FFF0F0";
//Définition des titres et sous titres des menus
Tableau.AddT("Titre 1");
Tableau.Add(0,"Sous-titre 1","javascript:alert('Sous-titre 1 du menu 1')");
Tableau.Add(0,"Sous-titre 2","javascript:alert('Sous-titre 2 du menu 1')");
Tableau.Add(0,"Sous-titre 3","javascript:alert('Sous-titre 3 du menu 1')");
Tableau.AddT("Titre 2");
Tableau.Add(1,"Sous-titre 1","javascript:alert('Sous-titre 1 du menu 2')");
Tableau.Add(1,"Sous-titre 2","javascript:alert('Sous-titre 2 du menu 2')");
Tableau.Add(1,"Sous-titre 3","javascript:alert('Sous-titre 3 du menu 2')");
Tableau.Add(1,"Sous-titre 4","javascript:alert('Sous-titre 4 du menu 2')");
Tableau.AddT("Titre 3","javascript:alert('Titre du menu 3')");
Tableau.Add(2,"Sous-titre 1","javascript:alert('Sous-titre 1 du menu 3')");
Tableau.Add(2,"Sous-titre 2","javascript:alert('Sous-titre 2 du menu 3')");
Tableau.Add(2,"Sous-titre 3","javascript:alert('Sous-titre 3 du menu 3')");
Tableau.AddT("Titre 4");
Tableau.Add(3,"Sous-titre 1","javascript:alert('Sous-titre 1 du menu 4')");
Tableau.AddT("Titre 5","javascript:alert('Titre du menu 5')");
//Définition des fonctions
//Définition de l'objet liste de menus
function Liste(){
this.Nombre; //Nombre de menus
this.HzVt; //Horizontal : Valeur nulle ; Vertical : valeur non nulle
this.Timer; //Timer actif : Valeur non nulle ; Timer inactif : Valeur nulle
this.TOut; //Temps à attendre pour fermer le menu si le timer est actif (en ms)
this.MOut; //Couleur du titre d'un menu non survolé
this.MOver; //Couleur du titre d'un menu survolé
this.SMOut; //Couleur d'un sous menu non survolé
this.SMOver; //Couleur d'un sous menu survolé
this.Menus=new Array();
this.Add=AddMenu;
this.Aff=AffMenu;
this.AddT=AddTitre;
}
//Définition de l'objet Menu
function Menu(){
this.Titre; //Titre du menu
this.State; //Etat du menu (affiché/masqué)
this.nb; //Nombre de sous menus
this.SMenu=new Array();
}
//Fonction chargée d'ajouter un titre aux menus
//Nom : Texte qui sera affiché sur la page HTML
//Lien (optionel) : Lien hypertexte associé au titre du menu
//Dest (optionel) : Frame cible du lien
function AddTitre(Nom,Lien,Dest){
this.Menus[this.Nombre]=new Menu();
if(Lien)
if(Dest)this.Menus[this.Nombre].Titre='<a href="'+Lien+'" target="'+Dest+'">'+Nom+'</a>';
else this.Menus[this.Nombre].Titre='<a href="'+Lien+'">'+Nom+'</a>';
else this.Menus[this.Nombre].Titre=Nom;
this.Menus[this.Nombre].nb=0;
this.Nombre++;
}
//Fonction chargée de créer les menus
//NumMenu : -1 si c'est un titre, numéro de sous menu sinon
//Nom : Texte qui sera affiché sur la page HTML
//Lien (optionel) : Lien hypertexte associé à l'entrée du menu
//Dest (optionel) : Frame cible du lien
function AddMenu(NumMenu,Nom,Lien,Dest){
if(!this.Nombre)return;
if(Lien)
if(Dest)this.Menus[NumMenu].SMenu[this.Menus[NumMenu].nb]='<a href="'+Lien+'" target="'+Dest+'">'+Nom+'</a>';
else this.Menus[NumMenu].SMenu[this.Menus[NumMenu].nb]='<a href="'+Lien+'">'+Nom+'</a>';
else this.Menus[NumMenu].SMenu[this.Menus[NumMenu].nb]=Nom;
this.Menus[NumMenu].nb++;
}
//Fonction chargée d'afficher ou masquer les menus
//m : Positif si le menu doit etre affiché, négatif si le menu doit etre masqué
//n : Numéro du menu à afficher ou masquer
function AffMenu(m,n){
if(m==1&&!this.HzVt)for(i=0;i<Tableau.Nombre;i++)this.Aff(-1,i);
//Création du tableau contenant le titre
Affichage="<table style='background-color:"+this.MOut+"' ";
//Quand on clique sur ce tableau, le sous menu est affiché/masqué
Affichage+="onClick='Tableau.Aff("+(-m)+","+n+")'><tr ";
Affichage+="onMouseOver='this.setAttribute(\"bgColor\",\""+this.MOver+"\")";
if(m==1&&!this.HzVt&&this.Timer)Affichage+=";clearTimeout(Time)";
Affichage+="' onMouseOut='this.setAttribute(\"bgColor\",\""+this.MOut+"\")";
if(m==1&&!this.HzVt&&this.Timer)Affichage+=";Time=setTimeout(\"Tableau.Aff(-1,"+n+")\","+this.TOut+")";
Affichage+="'><td align='center'>";
Affichage+=this.Menus[n].Titre;
Affichage+="</td></tr></table>";
Affichage+="<div ID='SMenu"+n+"'>";
//Si on doit afficher le sous menu
if(m>0){
Affichage+="<table style='background-color:"+this.SMOut+"'>";
for(i=0;i<this.Menus[n].nb;i++){
//Ajout des textes des sous menus
Affichage+="<tr ";
Affichage+="onMouseOver='this.setAttribute(\"bgColor\",\""+this.SMOver+"\")";
if(m==1&&!this.HzVt&&this.Timer)Affichage+=";clearTimeout(Time)";
Affichage+="' onMouseOut='this.setAttribute(\"bgColor\",\""+this.SMOut+"\")";
if(m==1&&!this.HzVt&&this.Timer)Affichage+=";Time=setTimeout(\"Tableau.Aff(-1,"+n+")\","+this.TOut+")";
Affichage+="'><td>";
Affichage+=this.Menus[n].SMenu[i];
Affichage+="</td></tr>";
}
Affichage+="</table>";
}
Affichage+=" </div>";
document.getElementById("Menu"+n).innerHTML=Affichage;
}
//Fonction chargée d'afficher les menus au chargement de la page
function InitMenu(){
//On appelle la fonction AffMenu, les sous menus sont masqués par défaut
document.write('<table class="table">');
document.write(Tableau.HzVt?'<tr><td width=110>':'<tr>');
for(i=0;i<Tableau.Nombre;i++){
document.write(Tableau.HzVt?'':'<td width=110 valign="top">');
document.write("<div ID=Menu"+i+"></div>");
Tableau.Aff(-1,i);
document.write(Tableau.HzVt?'':'</td>');
}
document.write(Tableau.HzVt?'</td></tr>':'</tr>');
}
Conclusion :
Testé Windows XP Pro SP2 avec IE6 et FireFox.
Bugs connus :
- Pour les menus contenant des liens ,le lien ne fonctionne pas sous FireFox (peut etre la redondance avec le onClick qui permet d'afficher ou masquer le sous menu).
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.