Accueil > > > MENU VERTICAL/HORIZONTAL FACILEMENT PARAMÉTRABLE ET MODIFIABLE
MENU VERTICAL/HORIZONTAL FACILEMENT PARAMÉTRABLE ET MODIFIABLE
Information sur la source
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
- //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>');
- }
//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).
Historique
- 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
Sources du même auteur
Sources de la même categorie
MENU VERTICALE GAUCHE ET DROIT DEROULANTMENU VERTICALE GAUCHE ET DROIT DEROULANTc'est repris d'une de mes source (menu glissant) sauf que au lieu de deplacer un element dans le document c'est un div en overflow hidden qui s'agrand...
par kazma
MENU VERTICALE EN TRANSPARENCEMENU VERTICALE EN TRANSPARENCECe menu est complètement modifiable, les fenêtres de sous menus étant composées de plusieur images, vous pouvez modifier la taille des sous menus en...
par dlvains
MENU DÉROULANT EN IMAGESMENU DÉROULANT EN IMAGES un menu simple a modifier, il vous suffit de changer le texte sur le PSD et d'enregistrer au format PNG.
si vous modifiez la largeur des images, pe...
par dlvains
TBFRAME: TAB BROWSING FRAMETBFRAME: TAB BROWSING FRAME Cela fait un moment que j'avais eu l'idée de mettre en ligne ce script, mais je n'avais jamais eu le temps de mettre un coup de propre dans le code ai...
par triumphs
MENU PRINCIPALMENU PRINCIPALBonjour, dans ce petit source, j'ai met une belle menu avec php,javascript, css, pour me contactet , ABOUSSEBABA ALI <contact@aliwebmaster.com>, à vou...
par ali1987
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Menu vertical et horizontal avec ouverture/fermeture d'un clic [ par neo_tsubasa ]
Bonjour, Je suis trés debutant en javascript et je voudrais faire un menu horizontal fixe qui lorsque l'on clique sur une de ces categories ouvr
menu déroulant vertical [ par rduvrac ]
J'ai récupéré ce script mais il ne fonctionne pas. J'aimerai bien car il est simple à mettre en place et à actualiser sinon.
créer un menu horizontal sur 2 lignes [ par zephou92 ]
je cherche une aide pour créer un menu horizontal sur 2 lignes en javascript (pas de php si c'est possible). merci vincentzephou92
Menu deroulant vertical [ par leo7511 ]
Bjr,J'espère être sur le bon thème.J'ai essayé le menu déroulant vertical en copiant le code sur le bloc note pour avoir le fichier "Menu.js" et ajout
Menu vertical particulier [ par GanJasTeR ]
Bonjour à tous.Voila je suis en train de réaliser mon portfolio et je bute sur un petit menu que j'ai dessiné mais que je n'aarive pas
Menu deroulant horizontal [ par flow92220 ]
J'ai donc un menu déroulant qui deroule les differents onglets quand la souris passe dessus.Mais, mon probleme c'est que le menu ne se "ré-e
Générer un menu vertical à partir d'une image [ par hugo37 ]
Bonjour à tous, j'ai un petit problème, en fait les scripts permettant d'insérer un menu déroulant ect... sont très bien sur
menu dynamique horizontal, problème avec le onload [ par metis15 ]
Bonsoir,Le menu dyn. horizontal..;http://www.javascriptfr.com/code.aspx?id=21045ne fontionne pas si je laisse le préchargement d'image...<body
Chargement de script [ par Straw ]
Bonjour à tous, Je suis en train de concevoir ce site-ci Il possède un menu déroulant horizontal, c'est une suite de <li> et un script ja
demande d'aide sur menu dynamique vertical [ par christmac ]
Voila je doit inclure pour un site un petit menu dynamique avec des sous menu en dessous, jusque la j'ai trouver plein de modele qui me va. Mais ou ce
|
Derniers Blogs
UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|