|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 MENU HORIZONTAL DYNAMIQUE AVEC SOUS-MENUS AVEC FONDU
 Information sur la source
 Description
Compatible IE & FireFox, de nombreux paramètres :
- Choix des Couleurs texte,surbrillance,contour (Sous)Menu.
- Sous-Menu affiché en une ligne/colonne.
- Titre & Adresse (Sous)Menu.
- Apparition en fondu du sous-menu
Voir une Démonstration sur http://menuhorizontal.pass-x.com
 Source
- //************ Menu Principal ************//
- Color0M = '#FFFFFF' //Couleur du texte
- Color1M = '#000000' //Couleur Arrière
- Color2M = '#6699CC' //Couleur Arrière Surbrillance
- Color3M = '#FF00FF' //Couleur Bordure ????
- PosY = -20 //Distance entre le haut de l'écran et le menu
- LargeurM = 110 //Largeur
- HauteurM = 30 //Hauteur
- AlignM = 'center' //'center','right','left'
- FontM = 'Verdana' //Police
- SizeM = 13 //Taille de la Police
- WeightM = 'bold' //Epaisseur de la Police
- CursorM = 'default' //Curseur-> default,hand...
-
- menu = new Array
- i=0
- //--------[Texte/Html]------------------[ Adresse ]--------------------------//
- menu[i++]='HomePage' ;menu[i++]='#'
- menu[i++]='Actualités' ;menu[i++]='http://ActuFr.com'
- menu[i++]='JavaScript' ;menu[i++]='http://www.javascriptfr.com'
- menu[i++]='CPP' ;menu[i++]='http://www.cppfrance.com'
-
- //************ Sous-Menus ************//
- Color0S = '#FFFFFF' //Couleur du texte
- Color1S = '#555555' //Couleur Arrière
- Color2S = '#6699FF' //Couleur Arrière Surbrillance
- Color3S = '#FFFF00' //Couleur Bordure
- EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne
- LargeurS = 150 //Largeur
- HauteurS = 20 //Hauteur
- AlignS = 'center' //'center','right','left'
- FontS = 'Verdana' //Police
- SizeS = 10 //Taille de la Police
- WeightS = 'bold' //Epaisseur de la Police
- FonduS = 1 //1:Fondu, 0:aucun
- CursorS = 'default' //Curseur-> default,hand...
-
- k=-1; zlien=new Array
-
- i=0; zlien[++k]=new Array
- //------------[Texte/Html]------------------[ Adresse ]-------------------------------//
- zlien[k][i++]='MultiDesk';zlien[k][i++]='http://multidesk.pass-x.com/'
- i=0; zlien[++k]=new Array // Pas de Sous-Menus pour le menu principal 'Mon Compte'
- //zlien[k][i++]='...' ;zlien[k][i++]='http://...'
- //zlien[k][i++]='...' ;zlien[k][i++]='http://...'
- i=0; zlien[++k]=new Array
- zlien[k][i++]='Code' ;zlien[k][i++]='http://www.javascriptfr.com/listecodes.aspx'
- zlien[k][i++]='Forum' ;zlien[k][i++]='http://www.javascriptfr.com/forum.v2.aspx'
- zlien[k][i++]='Emploi' ;zlien[k][i++]='http://www.javascriptfr.com/emploi.aspx'
- i=0; zlien[++k]=new Array
- zlien[k][i++]='Code' ;zlien[k][i++]='http://www.cppfrance.com/listecodes.aspx'
- zlien[k][i++]='Forum' ;zlien[k][i++]='http://www.cppfrance.com/forum.v2.aspx'
- zlien[k][i++]='Emploi' ;zlien[k][i++]='http://www.cppfrance.com/emploi.aspx'
- zlien[k][i++]='Livres' ;zlien[k][i++]='http://www.cppfrance.com/500.aspx?aspxerrorpath=/livres.aspx'
-
- //************ Fin des paramètres, Début du programme ************//
- document.write('<style>')
- document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
- document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
- document.write('</style>')
-
- function fadeIn(obj)
- { obj.style.filter="blendTrans(duration=1)"
- if(obj.filters.blendTrans.status!=1)
- { obj.filters.blendTrans.Apply()
- obj.style.visibility="visible"
- obj.filters.blendTrans.Play()
- }
- }
-
- document.onclick = function() { skn.visibility='hidden' }
- document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
- window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }
-
- function pop(msg,pos)
- { skn.visibility="hidden"
- skn.top=document.body.scrollTop+PosY+HauteurM
- if(!msg.length) return
- if(EnLigne)
- { content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
- for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
- } else
- { skn.left=pos-1
- content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"
- for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
- }
- document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
- if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible";
- }
-
- document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
- skn=document.getElementById('topdeck').style
- dgt=document.getElementById('topmenu').style
- for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
- document.write('</TR></TABLE></DIV>')
- dgt.top=document.body.scrollTop+PosY
//************ Menu Principal ************//
Color0M = '#FFFFFF' //Couleur du texte
Color1M = '#000000' //Couleur Arrière
Color2M = '#6699CC' //Couleur Arrière Surbrillance
Color3M = '#FF00FF' //Couleur Bordure ????
PosY = -20 //Distance entre le haut de l'écran et le menu
LargeurM = 110 //Largeur
HauteurM = 30 //Hauteur
AlignM = 'center' //'center','right','left'
FontM = 'Verdana' //Police
SizeM = 13 //Taille de la Police
WeightM = 'bold' //Epaisseur de la Police
CursorM = 'default' //Curseur-> default,hand...
menu = new Array
i=0
//--------[Texte/Html]------------------[ Adresse ]--------------------------//
menu[i++]='HomePage' ;menu[i++]='#'
menu[i++]='Actualités' ;menu[i++]='http://ActuFr.com'
menu[i++]='JavaScript' ;menu[i++]='http://www.javascriptfr.com'
menu[i++]='CPP' ;menu[i++]='http://www.cppfrance.com'
//************ Sous-Menus ************//
Color0S = '#FFFFFF' //Couleur du texte
Color1S = '#555555' //Couleur Arrière
Color2S = '#6699FF' //Couleur Arrière Surbrillance
Color3S = '#FFFF00' //Couleur Bordure
EnLigne = 0 //1:pour ranger sur une seule ligne 0:en colonne
LargeurS = 150 //Largeur
HauteurS = 20 //Hauteur
AlignS = 'center' //'center','right','left'
FontS = 'Verdana' //Police
SizeS = 10 //Taille de la Police
WeightS = 'bold' //Epaisseur de la Police
FonduS = 1 //1:Fondu, 0:aucun
CursorS = 'default' //Curseur-> default,hand...
k=-1; zlien=new Array
i=0; zlien[++k]=new Array
//------------[Texte/Html]------------------[ Adresse ]-------------------------------//
zlien[k][i++]='MultiDesk';zlien[k][i++]='http://multidesk.pass-x.com/'
i=0; zlien[++k]=new Array // Pas de Sous-Menus pour le menu principal 'Mon Compte'
//zlien[k][i++]='...' ;zlien[k][i++]='http://...'
//zlien[k][i++]='...' ;zlien[k][i++]='http://...'
i=0; zlien[++k]=new Array
zlien[k][i++]='Code' ;zlien[k][i++]='http://www.javascriptfr.com/listecodes.aspx'
zlien[k][i++]='Forum' ;zlien[k][i++]='http://www.javascriptfr.com/forum.v2.aspx'
zlien[k][i++]='Emploi' ;zlien[k][i++]='http://www.javascriptfr.com/emploi.aspx'
i=0; zlien[++k]=new Array
zlien[k][i++]='Code' ;zlien[k][i++]='http://www.cppfrance.com/listecodes.aspx'
zlien[k][i++]='Forum' ;zlien[k][i++]='http://www.cppfrance.com/forum.v2.aspx'
zlien[k][i++]='Emploi' ;zlien[k][i++]='http://www.cppfrance.com/emploi.aspx'
zlien[k][i++]='Livres' ;zlien[k][i++]='http://www.cppfrance.com/500.aspx?aspxerrorpath=/livres.aspx'
//************ Fin des paramètres, Début du programme ************//
document.write('<style>')
document.write('.ejmenu {background:'+Color1M+';text-align:'+AlignM+';font:'+WeightM+' '+SizeM+' '+FontM+';color:'+Color0M+';cursor:'+CursorM+'}')
document.write('.ejsmenu {background:'+Color1S+';text-align:'+AlignS+';font:'+WeightS+' '+SizeS+' '+FontS+';color:'+Color0S+';cursor:'+CursorS+'}')
document.write('</style>')
function fadeIn(obj)
{ obj.style.filter="blendTrans(duration=1)"
if(obj.filters.blendTrans.status!=1)
{ obj.filters.blendTrans.Apply()
obj.style.visibility="visible"
obj.filters.blendTrans.Play()
}
}
document.onclick = function() { skn.visibility='hidden' }
document.onmousemove = function() { dgt.top=document.body.scrollTop+PosY; dgt.visibility='visible' }
window.onscroll = function() { dgt.visibility=skn.visibility='hidden' }
function pop(msg,pos)
{ skn.visibility="hidden"
skn.top=document.body.scrollTop+PosY+HauteurM
if(!msg.length) return
if(EnLigne)
{ content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurM*menu.length/2+" bordercolor="+Color3S+" BORDER=1><TR>"
for(pass=0;pass<msg.length;pass+=2) content+="<TD onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD>"
} else
{ skn.left=pos-1
content="<TABLE style='border-collapse:collapse;'WIDTH="+LargeurS+" bordercolor="+Color3S+" BORDER=1>"
for(pass=0;pass<msg.length;pass+=2) content+="<TR><TD WIDTH="+LargeurS+" onMouseDown='location.href=\""+msg[pass+1]+"\"' onMouseOver=\"this.style.background='"+Color2S+"'\" onMouseOut=\"this.style.background='"+Color1S+"'\" HEIGHT="+HauteurS+" CLASS=ejsmenu>"+msg[pass]+"</TD></TR>"
}
document.getElementById("topdeck").innerHTML=content+"</TR></TABLE>"
if(document.all && FonduS) fadeIn(topdeck); else skn.visibility="visible";
}
document.write('<DIV style="position:relative"><DIV style="POSITION:absolute;VISIBILITY:hidden;z-index:15" id=topdeck></DIV><TABLE ID=topmenu style="position:absolute;border-collapse:collapse;" bordercolor='+Color3M+' BORDER=1 WIDTH='+LargeurM*menu.length/2 +' HEIGHT='+HauteurM+'><tr>')
skn=document.getElementById('topdeck').style
dgt=document.getElementById('topmenu').style
for(pass=0;pass<menu.length/2;pass++) document.write("<TD WIDTH="+LargeurM+" onMouseDown='location.href=\""+menu[pass*2+1]+"\"' onMouseOver='this.style.background=\""+Color2M+"\";pop(zlien["+pass+"],this.offsetLeft)' onMouseOut='this.style.background=\""+Color1M+"\"' CLASS=ejmenu>"+menu[pass*2]+"</TD>")
document.write('</TR></TABLE></DIV>')
dgt.top=document.body.scrollTop+PosY
 Conclusion
Ce menu ne détecte pas la sortie de souris afin de fermer automatiquement les sous-menus ou encore la gestion des frames. Pour avoir accès à ces fonctions et bien d'autres, je vous invite à visiter ce site http://menuhorizontal.pass-x.com (conseillé aux non débutants)
Pour faire fonctionner ce script, copier le code dans un fichier "Menu.js" par exemple.
Puis dans vos pages html, écrire entre les balises <body> et </body> :
<script language="JavaScript" src="Menu.js" type="text/JavaScript"></script>
Pour positionner le coin haut/gauche du menu sur votre page html, insérer le script dans un tableau :
<table width=440 border=0 align=center><tr><td><p>
<script language="JavaScript" src="Menu.js" type="text/JavaScript"></script>
</p></td></tr></table>
Astuce : les moteurs de recherche comme Google ne trouvront pas vos pages
Pour contourner ce problème, il suffit d'ajouter vos liens hypertextes en les balises
- <noframes><body> et </body></noframes> ou
- <noscript> </noscript>
 Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
 Télécharger le zip
 Historique
- 15 septembre 2004 14:16:09 :
- Compatibilité avec FireFox (Mozilla).
- 16 septembre 2004 13:01:57 :
- Sous-Menu sur une ligne ou sur une colonne.
- 20 septembre 2004 11:57:43 :
- A présent, la variable 'LargeurM' correspond à la largeur du menu et non à la largeur d'une cellule du menu.
- 06 janvier 2005 14:41:41 :
- - On peut à présent modifier presque toutes les couleurs du menu.
- De nombreux paramètres supplémentaires : Font,Taille,Epaisseur,Curseur ...
- Apparition en fondu des sous-menus.
- Bug corrigé : les cellules du menu principale scintillaient au passage de la souris sous IE.
- Code optimisé en taille
- 12 janvier 2005 09:48:57 :
- Astuce pour contourner le problème du référencement de Google.
Création du site de démonstration : http://menuhorizontal.pass-x.com
- 01 février 2005 02:29:53 :
- - Ajout d'un fichier ZIP
- Les sous-menus sont bien mieux positionnés par rapport aux cellules du menu
- 10 février 2005 12:04:37 :
- Optimisation de la présentation des variables.
- 02 avril 2005 13:02:06 :
- Optimisations du code...
- 02 mai 2005 18:17:09 :
- Quelques optimisations : l'imbrication des tableaux pour le menu et sous-menu a été enlevé.
Le code est plus simple à comprendre.
- 03 août 2005 08:26:55 :
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
|
Comparez les prix Nouvelle version
|