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
[MSTD10] SHAREPOINT 2010 ET TEAM FOUNDATION SERVER[MSTD10] SHAREPOINT 2010 ET TEAM FOUNDATION SERVER par phil
Un post rapide pour vous informer de la disponibilité de la vidéo de ma présentation sur SharePoint 2010 & Team Foundation Server. http://www.microsoft.com/france/vision/mstechdays10/Webcast.aspx?EID=20215d48-02e3-4d43-8c36-e53505c3b316 Dans la ...
Cliquez pour lire la suite de l'article par phil [MSTD10] SQL SERVER 2008 POUR LES DéVELOPPEURS ET VISUAL STUDIO TEAM SYSTEM DATABASE EDITION[MSTD10] SQL SERVER 2008 POUR LES DéVELOPPEURS ET VISUAL STUDIO TEAM SYSTEM DATABASE EDITION par Miiitch
Lors de cette session que j'ai animé avec Rui , j'ai eu l'occasion de présenter, en plus des nouveautés de SQL Server 2008, comment utiliser l'édition "database" de Visual Studio 2008. Le principe? Avoir les mêmes outils lors que l'on travaille avec une b...
Cliquez pour lire la suite de l'article par Miiitch [WF4] LOCALISER SIMPLEMENT UNE ACTIVITé ET SON DESIGNER WPF[WF4] LOCALISER SIMPLEMENT UNE ACTIVITé ET SON DESIGNER WPF par JeremyJeanson
La localisation . vous connaissez ce system miraculeux qui permet à votre application de s'afficher dans la langue de l'utilisateur (à condition de l'avoir intégrée dans votre programme). Comment mettre en place la localisation dans WF4? Cette question m'...
Cliquez pour lire la suite de l'article par JeremyJeanson [TECHDAYS 2010] WEBCASTS ET SLIDES[TECHDAYS 2010] WEBCASTS ET SLIDES par Audrey
Les webcasts des sessions des Techdays 2010 sont maintenant disponibles en ligne ! Me concernant, voici les slides et le webcast de la session Blend 3 / Skechtflow : Dessinez c'est gagné ! (animée avec Michel Perfetti ) Les slides et le webcast : Blend 3/...
Cliquez pour lire la suite de l'article par Audrey NDEPEND V3. J'ADORE SON INTéGRATION AVEC VS2010NDEPEND V3. J'ADORE SON INTéGRATION AVEC VS2010 par tja
Après une petite introduction à son utilisation que vous pouvez lire ici j'ai également eu envie d'installer ma copie et de jouer un peu avec. Après les premières minutes de son utilisation. J'ai tout de suite ADORE. L'utilisation intuitive sans besoi...
Cliquez pour lire la suite de l'article par tja
Logiciels
Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor Xlite (v 3.0 build 41150)XLITE (V 3.0 BUILD 41150)c'est un logiciel qui permet de téléphoner par Internet à l'aide d'un compte SIP pratique pour le... Cliquez pour télécharger Xlite Academy System (10.9.3.0)ACADEMY SYSTEM (10.9.3.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|