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
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
[SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko [FRAMEWORK 4] LES TASKS ET LE THREAD UI[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi
Je viens de passer quelques temps au TechDay's et j'ai pu voir pas mal de session intéressante. Par contre une chose m'a un peu étonné lors de certaines de ces sessions qui abordaient les améliorations du framework .NET (donc le 4.5) : en gros, bea...
Cliquez pour lire la suite de l'article par fathi WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
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 PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.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 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
|