Menu horizontal dynamique avec sous-menus avec fondu

Soyez le premier à donner votre avis sur cette source.

Vue 94 050 fois - Téléchargée 7 955 fois

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 / Exemple :


//************ 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>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_aizen42
Messages postés
1
Date d'inscription
jeudi 1 octobre 2009
Statut
Membre
Dernière intervention
13 septembre 2011
-
Bonjour,
J'ai vue qu'il y avais possibilité de faire disparaitre les sous liens au départ de la souri. je vous savoir ou placer les codes s'il vous plait merci.
noob2
Messages postés
24
Date d'inscription
vendredi 24 avril 2009
Statut
Membre
Dernière intervention
18 juin 2010
-
Ok, c'est bon mon menu s'affiche, y aurai-t-il un moyen pour enlever les bordure et les fond des menu, car jusque là j'ai juste réussi à changer les couleurs ?

Merci
noob2
Messages postés
24
Date d'inscription
vendredi 24 avril 2009
Statut
Membre
Dernière intervention
18 juin 2010
-
Bonjour,
J'ai une question, j'ai inserer une balise script, mais le menu ne s'affiche pas, merci
luludovicp
Messages postés
13
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
12 octobre 2010
-
bonjour,
ou mettre le <target="_blank"> pour que celui-ci ouvre une nouvelle fenêtre ???
kefah
Messages postés
38
Date d'inscription
jeudi 16 août 2007
Statut
Membre
Dernière intervention
18 août 2011
-
Bonjour,
j'ai bien aimer votre script, mais j'ai un problème, les sous menu s'ouvre tout à l'extrême gauche de la page!! comment faire !!

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.