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
 SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate 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
|