Menu vertical/horizontal facilement paramétrable et modifiable

Soyez le premier à donner votre avis sur cette source.

Vue 38 898 fois - Téléchargée 7 113 fois

Description

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+="&nbsp;</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).

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
jeudi 12 août 2004
Statut
Membre
Dernière intervention
14 janvier 2006

slt moi je n'arrive pas à inserrer cet code dans ma page HTML afin d'avoir des sous menu vertical.je veux que quelqu'un m'explique comment y proceder.j'ose croire que ma préocupation trouvera une suite favorable
Messages postés
23
Date d'inscription
lundi 26 septembre 2005
Statut
Membre
Dernière intervention
30 septembre 2005

non c'est bon pas besoin de répondre : auto réponse :) :
j'ai trouvé plus facil sur un autre site et ca marche alors je me prend pas la tete mais bon le tien il es plus joli que celui que j'ai trouvé

Bonne journée
Messages postés
23
Date d'inscription
lundi 26 septembre 2005
Statut
Membre
Dernière intervention
30 septembre 2005

pfff moi j'y comprend rien :( je suis vraiment nule en java :( quelqu'un peut me dire comment faire mes liens ? pourquoi le tableau n'apparait plus dès que je change une valeur ? et ca veut dire koi : _self

enfin la différence entre url et cible

je suis vraiment pas doué moi
Messages postés
23
Date d'inscription
lundi 26 septembre 2005
Statut
Membre
Dernière intervention
30 septembre 2005

moi c'est ce que je cherchais et que je ne trouvais pas alors merci marmotte
Messages postés
34
Date d'inscription
samedi 21 mai 2005
Statut
Membre
Dernière intervention
9 août 2007

Voici l'adresse du nouveau menu... j'espere que j'ai bien suivi tes conseils :)
http://www.javascriptfr.com/code.aspx?ID=32927
Afficher les 12 commentaires

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.