Menu vertical/horizontal facilement paramétrable et modifiable

Soyez le premier à donner votre avis sur cette source.

Vue 38 642 fois - Téléchargée 7 081 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

la_pin
Messages postés
275
Date d'inscription
mercredi 11 août 2004
Statut
Membre
Dernière intervention
15 décembre 2005

Vu le nombre de menu qu'il y a sur ce site, si tu veux vraiment sortir un menu qui se différencie des autres, tu devrais soigner au moins le design car ton menu est vraiment moche !
Tu dis que tu l'as fait à la va-vite, mais le but de ce site n'est pas de présenter des sources faites le plus vite possible mais des codes finis et aboutis...
Marmotte86
Messages postés
34
Date d'inscription
samedi 21 mai 2005
Statut
Membre
Dernière intervention
9 août 2007

j'avais deja dit que c'etait moche...
normalement, c'est mieux, j'ai modifié les couleurs
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
la_pin, calme toi, c'est l'un des rare menu OO, il n'aporte pas grand chose du coté des fonctionalitée, mais il est bien programmé...

ta class n'a que deux méthodes, c'est pas super super, théoriquement, un objet a plusieurs entrées et plusieurs sorties... (Un objet pour un menu, je dois dire que même si ça n'a qu'une sortie, c'est pratique...)
tu pourrais faire une méthode pour accèder à tes couleurs, une autre pour les deffinir, une méthode add_titre, plutot que de passer -1 comme oparamètre, tu pourrais du coup vraiment utiliser this.nombre, de sorte à suprimer le paramètre 1 de ta fonction add...
enfin voila, tu n'exploites pas assez la technologie objet, tu pourrais facilement faire un menu multi étages, vraiment paramétrable, et transparent...
Marmotte86
Messages postés
34
Date d'inscription
samedi 21 mai 2005
Statut
Membre
Dernière intervention
9 août 2007

Salut coucou747

Merci pour tous ces conseils, je vais essayer de les suivre... mais je debute en POO, donc je n'ai pas encore les bons reflexes :(
Marmotte86
Messages postés
34
Date d'inscription
samedi 21 mai 2005
Statut
Membre
Dernière intervention
9 août 2007

Voila, j'ai modifié un peu en tenant compte de tes conseils, par contre, je ne vois pas comment supprimer le paramètre 1 de ma fonction AddMenu... on peut evidemment utiliser this.Nombre quand on créé le menu, mais si on veut le modifier après (ajouter un élément par rapport à un formulaire par exemple), il faut bien pouvoir dire dans quel menu on veut ajouter cet élément... ou alors, je n'ai pas compris ce que tu voulais dire.

Pour les couleurs, j'ai ajouté des variables dans l'objet liste().

pour faire un menu avec plusieurs niveaux de sous menus, je ne voit pas comment faire (a part recommencer completement mes fonctions Add et Aff... donc presue tout)

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.