CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 23:53:04

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Menu & Co

> MENU VERTICAL - SOUS-NIVEAUX INFINIS - FACILEMENT MODIFIABLE

MENU VERTICAL - SOUS-NIVEAUX INFINIS - FACILEMENT MODIFIABLE

Information sur la source

Note :

7,50 / 10

Catégorie :Menu & Co Niveau :Initié Date de création :27/07/2005 Date de mise à jour :28/07/2005 08:54:45 Vu / téléchargé :33 188 / 4 575

Auteur : Marmotte86

Ecrire un message privé

Commentaire sur cette source (23)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Suite à un premier menu avec un seul sous-niveau possible (http://www.javascriptfr.com/code.aspx?ID=32842), et quelques remarques et conseils (merci beaucoup coucou747), voici un menu basé sur le premier, mais avec un nombre infini de sous niveaux.
Pour se repérer, les titres dont le sous menu est ouvert gardent une couleur différente (la meme que quand la souris les survole), et les sous menus sont indiqués par un > en fin de ligne.

La création des menus est assez facile, mais il ne faut pas se tromper dans les numéros de sous menus... je n'ai pas trouvé comment faire plus simple.

La plupart des parametres (voir tous) sont modifiables par les variables définies en haut du fichier .js

Source

//Définition des variables
var Liste=new Menu(); //Menu contenant les menus princpaux
var Largeur=165,Hauteur=20; //Largeur des menus et sous menus
var DivTop=20;DivLeft=20; //Position du menu par rapport au bord de la feuille (en pixels)
var Open; //Variable contenant la liste des sous menus affichés
var MOut='#FFF8F0'; //Couleur des menus non survolés
var MOver='#FFF8F0'; //Couleur des menus survolés
var SMOut='#F0FFF0'; //Couleur des sous menus non survolés
var SMOver='#FFF0F0'; //Couleur des sous menus survolés
var Timer=2000,Time; //Timer : Temps à attendre pour que le menu s'efface (nul => désactivé)
var LgID;
var Affichage,Com;
//Définition des menus et sous menus
Liste.State=1;
Liste.nb=0;
Liste.ID=Open="Liste";
LgID=Open.length;
Liste.AddM("Menu 1");
Liste.SMenu[0].AddM("Sous-Menu 1.1","javascript:alert('Sous-Menu 1.1')");
Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.1","javascript:alert('Sous-Menu 1.1.1')");
Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.2","javascript:alert('Sous-Menu 1.1.2')");
Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.3","javascript:alert('Sous-Menu 1.1.3')");
Liste.SMenu[0].SMenu[0].SMenu[2].AddM("Sous-Menu 1.1.3.1","javascript:alert('Sous-Menu 1.1.3.1')");
Liste.SMenu[0].SMenu[0].SMenu[2].SMenu[0].AddM("Sous-Menu 1.1.3.1.1","javascript:alert('Sous-Menu 1.1.3.1.1')");
Liste.SMenu[0].SMenu[0].SMenu[2].SMenu[0].AddM("Sous-Menu 1.1.3.1.2","javascript:alert('Sous-Menu 1.1.3.1.2')");
Liste.SMenu[0].SMenu[0].SMenu[2].SMenu[0].SMenu[1].AddM("Sous-Menu 1.1.3.1.2.1","javascript:alert('Sous-Menu 1.1.3.1.2.1')");
Liste.SMenu[0].SMenu[0].SMenu[2].AddM("Sous-Menu 1.1.3.2","javascript:alert('Sous-Menu 1.1.3.2')");
Liste.SMenu[0].SMenu[0].SMenu[2].AddM("Sous-Menu 1.1.3.3","javascript:alert('Sous-Menu 1.1.3.3')");
Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.4","javascript:alert('Sous-Menu 1.1.4')");
Liste.SMenu[0].AddM("Sous-Menu 1.2","javascript:alert('Sous-Menu 1.2')");
Liste.SMenu[0].SMenu[1].AddM("Sous-Menu 1.2.1","javascript:alert('Sous-Menu 1.2.1')");
Liste.SMenu[0].SMenu[1].AddM("Sous-Menu 1.2.1","javascript:alert('Sous-Menu 1.2.2')");
Liste.SMenu[0].AddM("Sous-Menu 1.3","javascript:alert('Sous-Menu 1.3')");
Liste.AddM("Menu 2");
Liste.SMenu[1].AddM("Sous-Menu 2.1","javascript:alert('Sous-Menu 2.1')");
Liste.SMenu[1].SMenu[0].AddM("Sous-Menu 2.1.1","javascript:alert('Sous-Menu 2.1.1')");
Liste.SMenu[1].SMenu[0].AddM("Sous-Menu 2.1.2","javascript:alert('Sous-Menu 2.1.2')");
Liste.SMenu[1].SMenu[0].SMenu[1].AddM("Sous-Menu 2.1.2.1","javascript:alert('Sous-Menu 2.1.2.1')");
Liste.SMenu[1].SMenu[0].SMenu[1].AddM("Sous-Menu 2.1.2.2","javascript:alert('Sous-Menu 2.1.2.2')");
Liste.SMenu[1].SMenu[0].SMenu[1].AddM("Sous-Menu 2.1.2.3","javascript:alert('Sous-Menu 2.1.2.3')");
Liste.SMenu[1].AddM("Sous-Menu 2.2","javascript:alert('Sous-Menu 2.2')");
Liste.SMenu[1].AddM("Sous-Menu 2.3","javascript:alert('Sous-Menu 2.3')");
Liste.SMenu[1].AddM("Sous-Menu 2.4","javascript:alert('Sous-Menu 2.4')");
Liste.AddM("Menu 3","javascript:alert('Menu 3')");
Liste.SMenu[2].AddM("Sous-Menu 3.1","javascript:alert('Sous-Menu 3.1')");
Liste.SMenu[2].AddM("Sous-Menu 3.2","javascript:alert('Sous-Menu 3.2')");
Liste.SMenu[2].SMenu[1].AddM("Sous-Menu 3.2.1","javascript:alert('Sous-Menu 3.2.1')");
Liste.SMenu[2].SMenu[1].SMenu[0].AddM("Sous-Menu 3.2.1.1","javascript:alert('Sous-Menu 3.2.1.1')");
Liste.SMenu[2].SMenu[1].SMenu[0].AddM("Sous-Menu 3.2.1.2","javascript:alert('Sous-Menu 3.2.1.2')");
Liste.SMenu[2].SMenu[1].AddM("Sous-Menu 3.2.2","javascript:alert('Sous-Menu 3.2.2')");
Liste.SMenu[2].AddM("Sous-Menu 3.3","javascript:alert('Sous-Menu 3.3')");
Liste.AddM("Menu 4");
Liste.SMenu[3].AddM("Sous-Menu 4.1","javascript:alert('Sous-Menu 4.1')");
Liste.AddM("Menu 5","javascript:alert('Menu 5')");
//Définition des fonctions
//Définition de l'objet Menu
function Menu(){
this.Titre; //Titre du menu
this.State; //Positif : Menu affiché ; Négatif : Menu masqué
this.nb; //Nombre de sous menus
this.ID; //Identifiant du menu ou sous menu
this.SMenu=new Array();
this.Lvl=Level;
this.AddM=AddMenu;
this.Aff=AffMenu;
this.AffB=AffBetween;
}
//Fonction chargée de créer les sous menus
//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(Nom,Lien,Dest){
this.SMenu[this.nb]=new Menu();
if(Lien)
if(Dest)this.SMenu[this.nb].Titre='<a href="'+Lien+'" target="'+Dest+'">'+Nom+'</a>';
else this.SMenu[this.nb].Titre='<a href="'+Lien+'">'+Nom+'</a>';
else this.SMenu[this.nb].Titre=Nom;
this.SMenu[this.nb].State=-1;
this.SMenu[this.nb].nb=0;
this.SMenu[this.nb].ID=this.ID+'.SMenu['+this.nb+']';
this.nb++;
}
//Fonction chargée de donner le nombre de sous niveaux maximum
//Level de l'objet
function Level(Lvl){
var i;
LvlMax=Lvl?LvlMax:0;
LvlMax=LvlMax<Lvl?Lvl:LvlMax;
if(this.nb)
for(i=0;i<this.nb;i++){
this.SMenu[i].Lvl(Lvl+1);
}
return LvlMax;
}
//Fonction chargée d'afficher ou masquer les menus
//Level : Place de la case en largeur
//Num : Place de la case en hauteur
function AffMenu(Level,Num){
var i,ColorOut,ColorOver;
ColorOut=(Level)?SMOut:MOut;
ColorOver=(Level)?SMOver:MOver;
document.getElementById('ListeLvl'+Level).style.top=Num*Hauteur+DivTop;
Affichage="";
if(this.State>0){
Affichage="<table bgColor="+ColorOut+">";
for(i=0;i<this.nb;i++){
Affichage+="<tr bgColor='";
Affichage+=this.SMenu[i].State>0?ColorOver:ColorOut;
Affichage+="' ";
Affichage+="onMouseOut='"+this.SMenu[i].ID+".State>0?this.setAttribute(\"bgColor\",\""+ColorOver+"\"):this.setAttribute(\"bgColor\",\""+ColorOut+"\");";
Affichage+=Timer?"Time=setTimeout(\""+Open.substring(0,LgID)+".AffB(0,0)\","+Timer+")' ":"' ";
Affichage+="onMouseOver='this.setAttribute(\"bgColor\",\""+ColorOver+"\");";
Affichage+=Timer?"clearTimeout(Time);":"";
Affichage+=this.SMenu[i].Lvl(0)?this.SMenu[i].ID+".AffB("+(Level+1)+","+(Num+i)+")' ":"' ";
Affichage+="><td width="+(Largeur-12)+" height="+Hauteur+">";
Affichage+=this.SMenu[i].Titre;
Affichage+="</td><td width=10>";
Affichage+=this.SMenu[i].nb?">":"";
Affichage+="</td></tr>";
}
Affichage+="</table>";
}
document.getElementById('ListeLvl'+Level).innerHTML=Affichage;
document.getElementById('ListeLvl'+Level).style.visibility="visible";
}
//Fonction chargée d'afficher le sous menu sélectionné
//Level : Niveau du sous menu à afficher
//Num : Numéro du sous menu à afficher
function AffBetween(Level,Num){
for(i=(LgID+Level*9),j=0;i<=Open.length;i+=9,j++)eval(Open.substring(0,i)+".State=-1");
this.State=-this.State;
if(LgID+Level*9<=Open.length){
if(Level>1){
Com=Open.substring(0,LgID+(Level-1)*9)+".State=1;"+Open.substring(0,LgID+(Level-1)*9)+".Aff("+(Level-1)+",(";
for(i=12;i<LgID+(Level-1)*9;i+=9)Com+=Open.charAt(i)+"+";
Com+="0))";
}
else Com=Open.substring(0,LgID)+".State=1;"+Open.substring(0,LgID)+".Aff(0,0)";
eval(Com);
}
for(i=Level;i<Liste.Lvl(0);i++){
document.getElementById('ListeLvl'+i).style.visibility="hidden";
}
this.Aff(Level,Num);
Open=this.ID;
}
//Fonction chargée d'afficher les menus au chargement de la page
function InitMenu(){
var i;
for(i=0;i<Liste.Lvl(0);i++){
document.write("<div ID='ListeLvl"+i+"' style='position:absolute;left:"+(i*(Largeur+4)+DivLeft)+"'></div>");
}
Liste.Aff(0,0);
}

//Définition des variables
var Liste=new Menu();		//Menu contenant les menus princpaux
var Largeur=165,Hauteur=20;	//Largeur des menus et sous menus
var DivTop=20;DivLeft=20;	//Position du menu par rapport au bord de la feuille (en pixels)
var Open;					//Variable contenant la liste des sous menus affichés
var MOut='#FFF8F0';			//Couleur des menus non survolés
var MOver='#FFF8F0';		//Couleur des menus survolés
var SMOut='#F0FFF0';		//Couleur des sous menus non survolés
var SMOver='#FFF0F0';		//Couleur des sous menus survolés
var Timer=2000,Time;		//Timer : Temps à attendre pour que le menu s'efface (nul => désactivé)
var LgID;
var Affichage,Com;

//Définition des menus et sous menus
Liste.State=1;
Liste.nb=0;
Liste.ID=Open="Liste";
LgID=Open.length;

Liste.AddM("Menu 1");
	Liste.SMenu[0].AddM("Sous-Menu 1.1","javascript:alert('Sous-Menu 1.1')");
		Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.1","javascript:alert('Sous-Menu 1.1.1')");
		Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.2","javascript:alert('Sous-Menu 1.1.2')");
		Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.3","javascript:alert('Sous-Menu 1.1.3')");
			Liste.SMenu[0].SMenu[0].SMenu[2].AddM("Sous-Menu 1.1.3.1","javascript:alert('Sous-Menu 1.1.3.1')");
				Liste.SMenu[0].SMenu[0].SMenu[2].SMenu[0].AddM("Sous-Menu 1.1.3.1.1","javascript:alert('Sous-Menu 1.1.3.1.1')");
				Liste.SMenu[0].SMenu[0].SMenu[2].SMenu[0].AddM("Sous-Menu 1.1.3.1.2","javascript:alert('Sous-Menu 1.1.3.1.2')");
					Liste.SMenu[0].SMenu[0].SMenu[2].SMenu[0].SMenu[1].AddM("Sous-Menu 1.1.3.1.2.1","javascript:alert('Sous-Menu 1.1.3.1.2.1')");
			Liste.SMenu[0].SMenu[0].SMenu[2].AddM("Sous-Menu 1.1.3.2","javascript:alert('Sous-Menu 1.1.3.2')");
			Liste.SMenu[0].SMenu[0].SMenu[2].AddM("Sous-Menu 1.1.3.3","javascript:alert('Sous-Menu 1.1.3.3')");
		Liste.SMenu[0].SMenu[0].AddM("Sous-Menu 1.1.4","javascript:alert('Sous-Menu 1.1.4')");
	Liste.SMenu[0].AddM("Sous-Menu 1.2","javascript:alert('Sous-Menu 1.2')");
		Liste.SMenu[0].SMenu[1].AddM("Sous-Menu 1.2.1","javascript:alert('Sous-Menu 1.2.1')");
		Liste.SMenu[0].SMenu[1].AddM("Sous-Menu 1.2.1","javascript:alert('Sous-Menu 1.2.2')");
	Liste.SMenu[0].AddM("Sous-Menu 1.3","javascript:alert('Sous-Menu 1.3')");

Liste.AddM("Menu 2");
	Liste.SMenu[1].AddM("Sous-Menu 2.1","javascript:alert('Sous-Menu 2.1')");
		Liste.SMenu[1].SMenu[0].AddM("Sous-Menu 2.1.1","javascript:alert('Sous-Menu 2.1.1')");
		Liste.SMenu[1].SMenu[0].AddM("Sous-Menu 2.1.2","javascript:alert('Sous-Menu 2.1.2')");
			Liste.SMenu[1].SMenu[0].SMenu[1].AddM("Sous-Menu 2.1.2.1","javascript:alert('Sous-Menu 2.1.2.1')");
			Liste.SMenu[1].SMenu[0].SMenu[1].AddM("Sous-Menu 2.1.2.2","javascript:alert('Sous-Menu 2.1.2.2')");
			Liste.SMenu[1].SMenu[0].SMenu[1].AddM("Sous-Menu 2.1.2.3","javascript:alert('Sous-Menu 2.1.2.3')");
	Liste.SMenu[1].AddM("Sous-Menu 2.2","javascript:alert('Sous-Menu 2.2')");
	Liste.SMenu[1].AddM("Sous-Menu 2.3","javascript:alert('Sous-Menu 2.3')");
	Liste.SMenu[1].AddM("Sous-Menu 2.4","javascript:alert('Sous-Menu 2.4')");

Liste.AddM("Menu 3","javascript:alert('Menu 3')");
	Liste.SMenu[2].AddM("Sous-Menu 3.1","javascript:alert('Sous-Menu 3.1')");
	Liste.SMenu[2].AddM("Sous-Menu 3.2","javascript:alert('Sous-Menu 3.2')");
		Liste.SMenu[2].SMenu[1].AddM("Sous-Menu 3.2.1","javascript:alert('Sous-Menu 3.2.1')");
			Liste.SMenu[2].SMenu[1].SMenu[0].AddM("Sous-Menu 3.2.1.1","javascript:alert('Sous-Menu 3.2.1.1')");
			Liste.SMenu[2].SMenu[1].SMenu[0].AddM("Sous-Menu 3.2.1.2","javascript:alert('Sous-Menu 3.2.1.2')");
		Liste.SMenu[2].SMenu[1].AddM("Sous-Menu 3.2.2","javascript:alert('Sous-Menu 3.2.2')");
	Liste.SMenu[2].AddM("Sous-Menu 3.3","javascript:alert('Sous-Menu 3.3')");

Liste.AddM("Menu 4");
	Liste.SMenu[3].AddM("Sous-Menu 4.1","javascript:alert('Sous-Menu 4.1')");

Liste.AddM("Menu 5","javascript:alert('Menu 5')");

//Définition des fonctions
	//Définition de l'objet Menu
function Menu(){
	this.Titre;				//Titre du menu
	this.State;				//Positif : Menu affiché ; Négatif : Menu masqué
	this.nb;				//Nombre de sous menus
	this.ID;				//Identifiant du menu ou sous menu
	this.SMenu=new Array();
	this.Lvl=Level;
	this.AddM=AddMenu;
	this.Aff=AffMenu;
	this.AffB=AffBetween;
}

	//Fonction chargée de créer les sous menus
		//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(Nom,Lien,Dest){
	this.SMenu[this.nb]=new Menu();
	if(Lien)
		if(Dest)this.SMenu[this.nb].Titre='<a href="'+Lien+'" target="'+Dest+'">'+Nom+'</a>';
		else this.SMenu[this.nb].Titre='<a href="'+Lien+'">'+Nom+'</a>';
	else this.SMenu[this.nb].Titre=Nom;
	this.SMenu[this.nb].State=-1;
	this.SMenu[this.nb].nb=0;
	this.SMenu[this.nb].ID=this.ID+'.SMenu['+this.nb+']';
	this.nb++;
}

	//Fonction chargée de donner le nombre de sous niveaux maximum
		//Level de l'objet
function Level(Lvl){
	var i;
	LvlMax=Lvl?LvlMax:0;
	LvlMax=LvlMax<Lvl?Lvl:LvlMax;
	if(this.nb)
		for(i=0;i<this.nb;i++){
			this.SMenu[i].Lvl(Lvl+1);
		}
	return LvlMax;
}

	//Fonction chargée d'afficher ou masquer les menus
		//Level : Place de la case en largeur
		//Num : Place de la case en hauteur
function AffMenu(Level,Num){
	var i,ColorOut,ColorOver;
	ColorOut=(Level)?SMOut:MOut;
	ColorOver=(Level)?SMOver:MOver;
	document.getElementById('ListeLvl'+Level).style.top=Num*Hauteur+DivTop;
	Affichage="";
	if(this.State>0){
		Affichage="<table bgColor="+ColorOut+">";
		for(i=0;i<this.nb;i++){
			Affichage+="<tr bgColor='";
			Affichage+=this.SMenu[i].State>0?ColorOver:ColorOut;
			Affichage+="' ";
			Affichage+="onMouseOut='"+this.SMenu[i].ID+".State>0?this.setAttribute(\"bgColor\",\""+ColorOver+"\"):this.setAttribute(\"bgColor\",\""+ColorOut+"\");";
			Affichage+=Timer?"Time=setTimeout(\""+Open.substring(0,LgID)+".AffB(0,0)\","+Timer+")' ":"' ";
			Affichage+="onMouseOver='this.setAttribute(\"bgColor\",\""+ColorOver+"\");";
			Affichage+=Timer?"clearTimeout(Time);":"";
			Affichage+=this.SMenu[i].Lvl(0)?this.SMenu[i].ID+".AffB("+(Level+1)+","+(Num+i)+")' ":"' ";
			Affichage+="><td width="+(Largeur-12)+" height="+Hauteur+">";
			Affichage+=this.SMenu[i].Titre;
			Affichage+="</td><td width=10>";
			Affichage+=this.SMenu[i].nb?">":"";
			Affichage+="</td></tr>";
		}
	Affichage+="</table>";
	}
	document.getElementById('ListeLvl'+Level).innerHTML=Affichage;
	document.getElementById('ListeLvl'+Level).style.visibility="visible";
}

	//Fonction chargée d'afficher le sous menu sélectionné
		//Level : Niveau du sous menu à afficher
		//Num : Numéro du sous menu à afficher
function AffBetween(Level,Num){
	for(i=(LgID+Level*9),j=0;i<=Open.length;i+=9,j++)eval(Open.substring(0,i)+".State=-1");
	this.State=-this.State;
	if(LgID+Level*9<=Open.length){
		if(Level>1){
			Com=Open.substring(0,LgID+(Level-1)*9)+".State=1;"+Open.substring(0,LgID+(Level-1)*9)+".Aff("+(Level-1)+",(";
			for(i=12;i<LgID+(Level-1)*9;i+=9)Com+=Open.charAt(i)+"+";
			Com+="0))";
		}
		else Com=Open.substring(0,LgID)+".State=1;"+Open.substring(0,LgID)+".Aff(0,0)";
		eval(Com);
	}
	for(i=Level;i<Liste.Lvl(0);i++){
		document.getElementById('ListeLvl'+i).style.visibility="hidden";
	}
	this.Aff(Level,Num);
	Open=this.ID;
}

	//Fonction chargée d'afficher les menus au chargement de la page
function InitMenu(){
	var i;
	for(i=0;i<Liste.Lvl(0);i++){
		document.write("<div ID='ListeLvl"+i+"' style='position:absolute;left:"+(i*(Largeur+4)+DivLeft)+"'></div>");
	}
	Liste.Aff(0,0);
}

Conclusion

Pour l'inclure dans une page HTML, il suffit de mettre cette ligne dans le <head> :
<script language=JavaScript src="Menu.js">

et ces lignes dans le <body> (pas dans l'événement onload, ca ne fonctionne pas):
<script language=JavaScript>
InitMenu();
</script>

Bugs connus :
- Pour les menus contenant des sous menus et un lien, le lien ne fonctionne pas dans IE (pour la version précedante, c'etait dans FireFox que ca ne fonctionnait pas...)
- De temps en temps, le timer ne fonctionne pas, il suffit de repasser sur le menu pour que ca fonctionne.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Menu JavaScript.html 236 octets
Menu.css 200 octets
Menu.js 7 627 octets

Télécharger le zip

Historique

27 juillet 2005 18:02:10 :: Le zip n'avait pas été pris...
28 juillet 2005 08:54:45 :: Ajout de la capture d'écran, et nouvel essai pour mettre le fichier zip Modification de plusieurs petits bugs

Sources du même auteur

MENU VERTICAL/HORIZONTAL FACILEMENT PARAMÉTRABLE ET MODIFIAB...

CALENDRIER PAR MOIS/ANNÉE AVEC AFFICHAGE DES NUMÉROS DE SEMA...

Toutes les sources de Marmotte86

Sources de la même categorie

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de MadM@tt le 28/07/2005 00:23:46

Salut, ton menu à l'air interressant, y'a t'il une adresse ou on peut le voir ?
Ou alors une capture pour voir ce que ça donne

Commentaire de Marmotte86 le 28/07/2005 08:30:17

salut
j'avais mi un fichier zip, mais apparement, le site ne l'a pas pris en compte... meme lors de la mise à jour
malheuresement, je n'ai pas encore de site, donc on ne peut pas le voir en fonctionnement :(
pour la capture, pas de pb, je fais ca des que je peux

Commentaire de Marmotte86 le 28/07/2005 16:01:36

J'ai trouvé pourquoi le lien ne fonctionne pas dans IE si il y a un sous menu... c'est la meme cause que pour FireFox avec mon premier menu (chacun son problème) !
Le onMouseOver de la ligne execute une action, donc IE ne detecte pas le lien, dans le premier menu, c'etait le onClick qui executait une action, et FireFox ne faisait pas les deux actions (onClick et lien), seulement une à la fois (ca lui suffit le pauvre mdr).

Par contre, je ne vois pas comment régler ce problème (j'ai essayé de déplacer la partie active du onMouseOver dans le lien, mais il faut passer sur le lien pour ouvrir le sous menu, donc c'est pas pratique), et si on met une commande pour le lien dans le onClick de la ligne, les actions JavaScript (history.back, alert, etc.) ne fonctionnent pas :(

Si quelqu'un a un idée...

Commentaire de nebamon le 01/08/2005 07:51:16

Très bien, je ne peux pas en faire autant !!

Commentaire de darkman2 le 08/08/2005 08:53:15

voila rien à dire
je trouve tres interessant ton script
bonne continuation

Commentaire de vash_the stampede le 17/08/2005 09:04:44

j'ai un leger probleme avec ce script
j'ai rajouter une option pour que le menu appraise comme le menu contextuel
ca marche il se met a cote de ma souris mais si je survole un des menu il se met tout en haut de l'ecran
et un autre probleme que j'ai c'est que le menu se trouve a gauche au lieu d'etre a droite(je pense qu'il suffit de regler les variables)

merci d'avance

Commentaire de vash_the stampede le 17/08/2005 09:06:52

apres rectification les sous menu apparaisse a la place ou il devrai etre si le menu etait fixe donc comment je pourrai leur dire de se deplacer a la creation?
et aussi comment je peut empecher le menu de se deplacer?

Commentaire de Marmotte86 le 24/08/2005 16:16:24

salut vash_the stampede

pour la place des sous menus, j'ai fixé la position des balises <div> a la fin du code (dans la fonction d'initialisation :
for(i=0;i<Liste.Lvl(0);i++){
document.write("<div ID='ListeLvl"+i+"' style='position:absolute;left:"+(i*(Largeur+4)+DivLeft)+"'></div>");

comme ca, apres, je n'ai plus qu'à les deplacer en hauteur pour les mettre en face du menu père... tu peux donc changer ce paramètre aussi, en mettant la position en X de ta souris dans la variable DivLeft, et en rappelant la fonction d'initialisation... je n'ai pas de meilleure solution pour l'instant, vu que je n'avais pas pensé à le mettre en menu contextuel (bonne idée ;))

pour mettre le sous-menu vers la droite, je n'ai rien fait, vu que je l'avais placé en haut à gauche... je vais voir si je peux ajouter une variable pour le faire, mais pour l'instant j'ai pas trop de temps (installation de linux qui merde !!!).

Commentaire de Marmotte86 le 24/08/2005 18:20:13

dsl, correction... :S

il faut mettre les deux coordonées de la souris dans les variables DivLeft et DivTop... sinon, les sous menus restent en haut.

PS : Linux ne fonctionne toujours pas, si des connaisseurs peuvent m'aider, ce sera avec joie !

Commentaire de vash_the stampede le 08/09/2005 20:37:45

merci mais vus que je maitrise a fond le javascript je pense que je vais attendre une relese en contextuel ;)

Commentaire de loothof le 25/09/2005 18:51:06

Bonjour a tous,
ton script est très bien, je vais le mettre ne place sur mon site.
Néanmoins j'aimerais ajouter une modification mais mes connaissances en javascript sont limitées.
j'aimerais que quand la souris quitte l'air d'un sous-menu celui-ci disparaisse
Pourrais-tu m'indiquer les modifications à effectuer.
Merci.

Commentaire de homelaet le 28/09/2005 14:30:03

je ne m'y connais pas non plus mais je pense que c'est a la ligne 10 là ou ya timer faut le réduire

var Timer=2000,Time; //Timer : Temps à attendre pour que le menu s'efface (nul => désactivé

enfin je crois

Commentaire de jnbrunet le 10/01/2006 01:21:23

Salut,
Comment faire pour, à la place d'utiliser une couleur de fond pour les menus et sous-menu, utiliser une image?

Merci
Jn

Commentaire de LogiWeb le 18/02/2006 00:30:52

Bonjour à tous,

Je viens de trouver ce très bon script pour le boulot mais un petit souci se pose lorsque les sous-menus dépassent la valeur de 10, j'ai essayé de modifier la 'function AffBetween' car un coeff. de 9 est utilisé pour la variable 'Level' mais le code réagit mal.

Help me please ! Un grand Merci !

Commentaire de LogiWeb le 28/02/2006 15:25:52

Bonjour à tous,

Je viens de trouver la solution à mon problème sur la limite de l'infini, voici la correction apportée à la fonction 'AffBetween' :

function AffBetween(Level,Num){

var poscrochetd = Open.search(/]/);

for(i=(LgID+Level*9),j=0;i<=Open.length;i+=9,j++)eval(Open.substring(0,poscrochetd+i)+".State=-1");

...

Merci, LogiWeb.

Commentaire de ybouane le 06/04/2006 02:21:55

salut ton code est celui que je cherché.il est cool est utile @+
(http://ybouane.oldiblog.com

Commentaire de Dante7774 le 30/05/2006 09:49:30

Super script et trés simple a modifier un grand bravo a son dévlopeur merci a toi :)

Commentaire de dartagnan0606 le 30/08/2006 01:43:11

Bonjour,
Enfin le menu que je recherchais.
Je débute dans ce genre d'exercice et je reconnais que ce code est tellement bien expliqué que j'ai pu apporté les corrections que je souhaitais!!
Génial!
Par contre, je ne sais pas comment il faut créer les liens vers les pages!!!
Pour lui dire d'aller ouvrir la page menu1 etc... Que faut-il faire?
Merci d'avance pour vos réponses.
Et surtout merci au développeur!!

Commentaire de yogaman le 13/03/2007 18:34:10

super script ! Merci à toi

Commentaire de gen76 le 09/06/2007 00:07:38

merci cool le script ! ;
je suis bleu (newbie) : jai mis le script dans le cadre de gauche (frame) mais une partie reste caché dessous le cadre de droite !
comment faire ? et encore merci

Commentaire de Marmotte86 le 09/08/2007 20:37:35

Oups ca fit un certain temps que je n'était pas passé sur ce site...

Donc pour les liens (la question date d'un an... mais d'autres se la posent peut être encore) c'est le deuxième paramètre de la méthode qui crée les objets.

Pour les frames, il n'est pas possible de permettre a une page de sortir de sa frame (ca correspond en gros a deux fenêtre collées a coté dans la même fenêtre, il faut donc placer le menu directement sur la page et pas dans une frame a coté ;)

Commentaire de bibifree78 le 19/10/2007 01:53:40

Bonjour
Pourrais-je avoir une réponse à la question qui a été formulée précédemment ?
"Bonjour a tous,
ton script est très bien, je vais le mettre ne place sur mon site.
Néanmoins j'aimerais ajouter une modification mais mes connaissances en javascript sont limitées.
j'aimerais que quand la souris quitte l'air d'un sous-menu celui-ci disparaisse
Pourrais-tu m'indiquer les modifications à effectuer.
Merci."

Re merci

Commentaire de cynus le 06/11/2007 12:58:57

Bonjour, super srcipt
un petit probleme, c'est que enxhtml, ca passe pas bien
je m'explique, les sous menu ne s'affichent plus a cote comme en html, mé ils s'affichent sur les menu parent.
en gros ils ce superposent

une idée pour corriger ce probleme

Ajouter un commentaire

Nos sponsors

Derniers Blogs

SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc

[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

Forum

RE : RéCUPéRER LA VALEUR D'UNE VARIABLE PHP POUR L'UTILISER EN JAVASCRIPT par stealone

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011