Accueil > > > MENU VERTICAL AVEC SOUS-MENUS
 MENU VERTICAL AVEC SOUS-MENUS
 Information sur la source
 Description
Un menu vertical avec de nombreux paramètres. Personnaliser : - Couleur (Sous)Menu - Couleur surbrillance (Sous)Menu - Couleur contour (Sous)Menu - Titre & Adresse (Sous)Menu
 Source
- //************ Menu Principal ************//
- Text = '#FFFFFF'
- bgcolor = '#000000' // Couleur Arrière
- bgcolor2 = '#6699CC' // Couleur Arrière Surbrillance
- bgcolor3 = '#ff00ff' // Couleur Bordure
- LargeurM = 110 // Largeur
- HauteurM = 30 // Hauteur
- TailleM = 2 // Taille Font
- menu = new Array
- i=0
- menu[i++] = 'HomePage' // <-- Titre
- menu[i++] = '#' // <-- Adresse (ici aucune)
- menu[i++] = 'Mon Compte'
- menu[i++] = 'http://www.javascriptfr.com/moncompte.aspx'
- menu[i++] = 'JavaScript'
- menu[i++] = 'http://www.javascriptfr.com'
- menu[i++] = 'CPP'
- menu[i++] = 'http://www.cppfrance.com'
-
- //************ Sous-Menus ************//
- bgcolor5 ='#555555' // Couleur Arrière
- bgcolor6 ='#6699ff' // Couleur Arrière Surbrillance
- bgcolor4 ='#ffff00' // Couleur Bordure
- LargeurS = 150 // Largeur
- HauteurS = 20 // Hauteur
- TailleS = 1 // Taille Font
- zlien = new Array
- zlien[0] = new Array
- zlien[1] = new Array
- zlien[2] = new Array
- zlien[3] = new Array
- i=0
- zlien[0][i++] = 'MultiDesk' // <-- Titre
- zlien[0][i++] = 'http://multidesk.pass-x.com/' // <-- Adresse
- //i=0 Pas de Sous-Menus pour le menu principal 'Mon Compte'
- //zlien[1][i++] = '...'
- //zlien[1][i++] = 'http://'
- //zlien[1][i++] = '...'
- //zlien[1][i++] = 'http://...'
- i=0
- zlien[2][i++] = 'Code'
- zlien[2][i++] = 'http://www.javascriptfr.com/listecodes.aspx'
- zlien[2][i++] = 'Forum'
- zlien[2][i++] = 'http://www.javascriptfr.com/forum.v2.aspx'
- zlien[2][i++] = 'Emploi'
- zlien[2][i++] = 'http://www.javascriptfr.com/emploi.aspx'
- i=0
- zlien[3][i++] = 'Code'
- zlien[3][i++] = 'http://www.cppfrance.com/listecodes.aspx'
- zlien[3][i++] = 'Forum'
- zlien[3][i++] = 'http://www.cppfrance.com/forum.v2.aspx'
- zlien[3][i++] = 'Emploi'
- zlien[3][i++] = 'http://www.cppfrance.com/emploi.aspx'
- zlien[3][i++] = 'Livres'
- zlien[3][i++] = 'http://www.cppfrance.com/500.aspx?aspxerrorpath=/livres.aspx'
-
- //************ Fin des paramètres, Début du programme ************//
-
- document.write('<style type="text/css">')
- document.write('.popper {POSITION:absolute; VISIBILITY:hidden; z-index:15; left:'+(LargeurM-1)+' }')
- document.write('.ejsmenu {color:#FFFFFF; text-decoration:none; cursor:default;}') //cursor:default ou hand
- document.write('</style>')
- document.write('<div style="position:relative"><DIV class=popper id=topdeck></DIV>')
-
- if(document.getElementById) { skn = document.getElementById("topdeck").style }
-
- function pop(msg,pos)
- { skn.visibility = "hidden"
- skn.top = pos
- if(msg.length == 0) return
- var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="+bgcolor4+" WIDTH="+LargeurS+"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
- pass = 0
- while(pass < msg.length)
- { content += "<TR><TD BGCOLOR="+bgcolor5+" onMouseDown='location.href=\""+msg[pass+1]+"\"'CLASS=ejsmenu onMouseOver=\"this.style.background='"+bgcolor6+"'\" onMouseOut=\"this.style.background='"+bgcolor5+"'\" HEIGHT="+HauteurS+"><FONT SIZE="+TailleS+" FACE=Verdana><B> "+msg[pass]+"</B></FONT></TD></TR>";
- pass+=2
- }
- content += "</TABLE></TD></TR></TABLE>"
- document.getElementById("topdeck").innerHTML = content
- skn.visibility = "visible"
- }
-
- document.onclick = function() { if(document.getElementById) skn.visibility = "hidden" }
-
- if(document.getElementById)
- { document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+LargeurM+' HEIGHT=80><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT='+HauteurM*menu.length/2+'>')
- pass = 0
- while(pass < menu.length/2)
- { document.write('<tr><TD WIDTH='+LargeurM+' ALIGN=center BGCOLOR='+bgcolor+' onMouseDown="location.href=\''+menu[pass*2+1]+'\'" onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien['+pass+'],'+pass*HauteurM+')" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE='+TailleM+' FACE=Verdana><B>'+menu[pass*2]+'</B></FONT></TD></tr>')
- pass++
- }
- document.write('</TABLE></TD></TR></TABLE></DIV>')
- }
- document.write('</div>')
//************ Menu Principal ************//
Text = '#FFFFFF'
bgcolor = '#000000' // Couleur Arrière
bgcolor2 = '#6699CC' // Couleur Arrière Surbrillance
bgcolor3 = '#ff00ff' // Couleur Bordure
LargeurM = 110 // Largeur
HauteurM = 30 // Hauteur
TailleM = 2 // Taille Font
menu = new Array
i=0
menu[i++] = 'HomePage' // <-- Titre
menu[i++] = '#' // <-- Adresse (ici aucune)
menu[i++] = 'Mon Compte'
menu[i++] = 'http://www.javascriptfr.com/moncompte.aspx'
menu[i++] = 'JavaScript'
menu[i++] = 'http://www.javascriptfr.com'
menu[i++] = 'CPP'
menu[i++] = 'http://www.cppfrance.com'
//************ Sous-Menus ************//
bgcolor5 ='#555555' // Couleur Arrière
bgcolor6 ='#6699ff' // Couleur Arrière Surbrillance
bgcolor4 ='#ffff00' // Couleur Bordure
LargeurS = 150 // Largeur
HauteurS = 20 // Hauteur
TailleS = 1 // Taille Font
zlien = new Array
zlien[0] = new Array
zlien[1] = new Array
zlien[2] = new Array
zlien[3] = new Array
i=0
zlien[0][i++] = 'MultiDesk' // <-- Titre
zlien[0][i++] = 'http://multidesk.pass-x.com/' // <-- Adresse
//i=0 Pas de Sous-Menus pour le menu principal 'Mon Compte'
//zlien[1][i++] = '...'
//zlien[1][i++] = 'http://'
//zlien[1][i++] = '...'
//zlien[1][i++] = 'http://...'
i=0
zlien[2][i++] = 'Code'
zlien[2][i++] = 'http://www.javascriptfr.com/listecodes.aspx'
zlien[2][i++] = 'Forum'
zlien[2][i++] = 'http://www.javascriptfr.com/forum.v2.aspx'
zlien[2][i++] = 'Emploi'
zlien[2][i++] = 'http://www.javascriptfr.com/emploi.aspx'
i=0
zlien[3][i++] = 'Code'
zlien[3][i++] = 'http://www.cppfrance.com/listecodes.aspx'
zlien[3][i++] = 'Forum'
zlien[3][i++] = 'http://www.cppfrance.com/forum.v2.aspx'
zlien[3][i++] = 'Emploi'
zlien[3][i++] = 'http://www.cppfrance.com/emploi.aspx'
zlien[3][i++] = 'Livres'
zlien[3][i++] = 'http://www.cppfrance.com/500.aspx?aspxerrorpath=/livres.aspx'
//************ Fin des paramètres, Début du programme ************//
document.write('<style type="text/css">')
document.write('.popper {POSITION:absolute; VISIBILITY:hidden; z-index:15; left:'+(LargeurM-1)+' }')
document.write('.ejsmenu {color:#FFFFFF; text-decoration:none; cursor:default;}') //cursor:default ou hand
document.write('</style>')
document.write('<div style="position:relative"><DIV class=popper id=topdeck></DIV>')
if(document.getElementById) { skn = document.getElementById("topdeck").style }
function pop(msg,pos)
{ skn.visibility = "hidden"
skn.top = pos
if(msg.length == 0) return
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="+bgcolor4+" WIDTH="+LargeurS+"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while(pass < msg.length)
{ content += "<TR><TD BGCOLOR="+bgcolor5+" onMouseDown='location.href=\""+msg[pass+1]+"\"'CLASS=ejsmenu onMouseOver=\"this.style.background='"+bgcolor6+"'\" onMouseOut=\"this.style.background='"+bgcolor5+"'\" HEIGHT="+HauteurS+"><FONT SIZE="+TailleS+" FACE=Verdana><B> "+msg[pass]+"</B></FONT></TD></TR>";
pass+=2
}
content += "</TABLE></TD></TR></TABLE>"
document.getElementById("topdeck").innerHTML = content
skn.visibility = "visible"
}
document.onclick = function() { if(document.getElementById) skn.visibility = "hidden" }
if(document.getElementById)
{ document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+LargeurM+' HEIGHT=80><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT='+HauteurM*menu.length/2+'>')
pass = 0
while(pass < menu.length/2)
{ document.write('<tr><TD WIDTH='+LargeurM+' ALIGN=center BGCOLOR='+bgcolor+' onMouseDown="location.href=\''+menu[pass*2+1]+'\'" onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien['+pass+'],'+pass*HauteurM+')" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE='+TailleM+' FACE=Verdana><B>'+menu[pass*2]+'</B></FONT></TD></tr>')
pass++
}
document.write('</TABLE></TD></TR></TABLE></DIV>')
}
document.write('</div>')
 Conclusion
Copier ce code dans un fichier "Menu.js" par exemple.
Puis dans vos page html, écrire entre les balises <body> et </body> :
<script language="JavaScript" src="Menu.js" type="text/JavaScript"></script>
Ici, une présentation du code : http://horizonpc.phpnet.org/Code/Menu%20Vertical.h tml
 Historique
- 12 septembre 2004 12:57:00 :
- Ajout d'explication sur le fonctionnement.
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [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
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm 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
|