MENU VERTICAL/HORIZONTAL FACILEMENT PARAMÉTRABLE ET MODIFIABLE

//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>');
}

Télécharger le zip

22 juillet 2005 21:19:08 :

Commentaires "plus clairs"

23 juillet 2005 10:11:58 :

MàJ comentaire final

24 juillet 2005 20:05:45 :

Ajout d'une variable permettant de passer de vertical à horizontal (et modif du titre de la source) Le sous menu affiché est masqué quand on en ouvre un autre en mode horizontal Ajout d'un paramètre à la fonction AddMenu, permettant de diriger le lien vers un autre iframe Modification des couleurs (c'est moins moche)

24 juillet 2005 20:16:21 :

Correction Affichage pour FireFox (espace entre les menus en vertical)

24 juillet 2005 20:17:29 :

Désolé de ces mises a jour rapides... j'avais oublié de modifier la source :(

25 juillet 2005 15:23:52 :

Ajout d'une fonction AddTitre, et de variables dans l'objet pour les couleurs, merci coucou747 ;) Ajout de timer activable/desactivable pour masquer les menus en mode horizontal

• MENU VERTICAL - SOUS-NIVEAUX INFINIS - FACILEMENT MODIFIABLE
• CALENDRIER PAR MOIS/ANNÉE AVEC AFFICHAGE DES NUMÉROS DE SEMAINE

• MENU EN CASCADE
• UN MENU DE NAVIGATION LATÉRAL ESCAMOTABLE
• MENU GLISSANT
• GENERATEUR D ARBRE
• CURSEUR QUI POINTE LA SOURIS

• MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES MENUS SECONDAIRES VALIDÉ IE ET FIREFOX
• MENU VERTICAL D'UNE PAGE DHTML, GENERE DYNAMIQUEMENT, UTILISANT LES CSS, COMPATIBLE IE ET NETSCAPE
• MENU HORIZONTAL BASIQUE. CODE SIMPLE ET CLAIR. IDEAL POUR PERSONNALISATION.
• MENU MULTI-NIVEAUX HORIZONTAL/VERTICAL
• MENU VERTICALE DYNAMIQUE