Forum « Pb Menu déroulant »

Forum « Programmation Javascript » (archives)

Pb Menu déroulant

Envoyé: 7 septembre 2004, 7h36 par maxou2009

J'ai un problème avec un code javascript de menu déroulant qui lorsqu'il se déroule se place sous les combobox et applet. On m'a conseillé de l'encapsuler dans un iframe mais je ne sais pas faire ça car je ne suis pas un pro. Quelqu'un peut il m'aider cela m'aiderait beaucoup.

Voici le code d'appel du menu dasn ma page HTML :
<body>

<SCRIPT LANGUAGE=JavaScript>
if(document.getElementById)
document.write('<DIV class=popper id=topdeck></DIV>');
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="js/menu.js"></SCRIPT>

</body>

Voici le code javascript du fichier "menu.js" :
//////////////////////////
// MISE EN FORME ET DESIGN
//////////////////////////

// POSITION X DU MENU
posXmenu = 0;
// POSITION Y DU MENU
posYmenu = 75;
// HAUTEUR DE LIGNE DES RUBRIQUES
hauteur_ligne_menu=25;
// HAUTEUR DE LIGNE DES SOUS RUBRIQUES
hauteur_ligne_pop=20;
// MARGE DROITE DES SOUS RUBRIQUES
marge_droite=15;
// FOND DE RUBRIQUE OFF
bgcolor='#000066';
// FOND DE RUBRIQUE ON + FOND DE SOUS RUBRIQUE
bgcolor2='#CCCCFF';
// BORDURE DE SOUS RUBRIQE
bgcolor3='#5C5CA3';
// IMAGE OFF MARGE GAUCHE
image_sep0_off = new Image;
image_sep0_off.src = "picts/menuDHTML/separateurMenu_0.gif";
// IMAGE ON MARGE GAUCHE
image_sep0_on = new Image;
image_sep0_on.src = "picts/menuDHTML/separateurMenu_0_on.gif";
// IMAGE SEPARATEUR MENU OFF
image_sep = new Image;
image_sep.src = "picts/menuDHTML/separateurMenu.gif";
// IMAGE SEPARATEUR MENU GAUCHE ON
image_sep_gauche = new Image;
image_sep_gauche.src = "picts/menuDHTML/separateurMenu_on_g.gif";
// IMAGE SEPARATEUR MENU DROITE OFF
image_sep_droite = new Image;
image_sep_droite.src = "picts/menuDHTML/separateurMenu_on_d.gif";
// INITIALISATION DES CALQUES
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3; }')
document.write('#topgauche { position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10; }')
document.write('</style>')
document.write('<DIV class=popper id=topdeck></DIV>');

/////////////////////////////////////////////////////////
// PARTIE A COMPLETER PAR DONNEES EN BDD ET REGLAGES MAIN
/////////////////////////////////////////////////////////

// CHOIX DU LANGAGE
langage='FR';
//langage='UK';

// INDIQUER ICI LE NOMBRE DE RUBRIQUES A AFFICHER
if (langage=='FR')
{
nbreRubriques=6;
}
else // UK
{
nbreRubriques=6;
}

// LARGEUR DES RUBRIQUES
// REGLAGE A LA MAIN :
// AJOUTER 'bgcolor=red' dans le <TD> de la ligne 466
// TESTER LA TAILLE JUSQU'A AVOIR ENVIRON 5 PIXELS DE CHAQUE COTE DU LIBELLE DE LA RUBRIQUE
// RETIRER 'bgcolor=red'
largeurRubriques = new Array;
if (langage=='FR')
{
largeurRubriques[0] = 65;
largeurRubriques[1] = 73;
largeurRubriques[2] = 54;
largeurRubriques[3] = 53;
largeurRubriques[4] = 38;
largeurRubriques[5] = 60;
}
else // UK
{
largeurRubriques[0] = 45;
largeurRubriques[1] = 73;
largeurRubriques[2] = 75;
largeurRubriques[3] = 63;
largeurRubriques[4] = 70;
largeurRubriques[5] = 68;
}

// LARGEUR DES SOUS RUBRIQUES
// REGLAGE A LA MAIN :
// RETIRER 'marge_droite+'
// TESTER LA TAILLE JUSQU'A BONNE TENUE DES LIBELLES DES SOUS RUBRIQUES
// REMETTRE 'marge_droite+'
largeur_pop = new Array;
if (langage=='FR')
{
largeur_pop[0]=marge_droite+173;
largeur_pop[1]=marge_droite+189;
largeur_pop[2]=marge_droite+240;
largeur_pop[3]=marge_droite+138;
largeur_pop[4]=marge_droite+109;
largeur_pop[5]=marge_droite+109;
}
else // UK
{
largeur_pop[0]=marge_droite+108;
largeur_pop[1]=marge_droite+185;
largeur_pop[2]=marge_droite+170;
largeur_pop[3]=marge_droite+138;
largeur_pop[4]=marge_droite+81;
largeur_pop[5]=marge_droite+87;
}

// LIBELLES DES RUBRIQUES
nomRubriques = new Array;
if (langage=='FR')
{
nomRubriques[0] = 'Actualités';
nomRubriques[1] = 'Le Groupe';
nomRubriques[2] = 'Métiers';
nomRubriques[3] = 'Projets';
nomRubriques[4] = 'Pays';
nomRubriques[5] = 'Activités';
}
else // UK
{
nomRubriques[0] = 'News';
nomRubriques[1] = 'The Group';
nomRubriques[2] = 'Job areas';
nomRubriques[3] = 'Projects';
nomRubriques[4] = 'Countries';
nomRubriques[5] = 'Activities';
}

// INDIQUER ICI LE NOMBRE DE SOUS RUBRIQUES PAR RUBRIQUE.
nbreSousRubriques = new Array;
for(var r=0;r<=nbreRubriques-1;r++){nbreSousRubriques[r] = new Array;}
if (langage=='FR')
{
nbreSousRubriques[0]=2;
nbreSousRubriques[1]=5;
nbreSousRubriques[2]=9;
nbreSousRubriques[3]=5;
nbreSousRubriques[4]=4;
nbreSousRubriques[5]=2;
}
else // UK
{
nbreSousRubriques[0]=2;
nbreSousRubriques[1]=5;
nbreSousRubriques[2]=9;
nbreSousRubriques[3]=5;
nbreSousRubriques[4]=4;
nbreSousRubriques[5]=1;
}

// LIBELLES ET LIENS DES SOUS RUBRIQUES
nomSousRubriques = new Array;
lienSousRubriques = new Array;
for(var r=0;r<=nbreRubriques;r++)
{
nomSousRubriques[r] = new Array;
lienSousRubriques[r] = new Array;
}
// LIBELLES DES SOUS RUBRIQUES
if (langage=='FR')
{
nomSousRubriques[0][0] = 'Communiqués de presse';
nomSousRubriques[0][1] = 'Flash info';
nomSousRubriques[1][0] = 'Présentations et documents';
nomSousRubriques[1][1] = 'Histoire du Groupe';
nomSousRubriques[1][2] = 'Le Groupe en pubs';
nomSousRubriques[1][3] = 'Identité visuelle';
nomSousRubriques[1][4] = 'Sites web du Groupe';
nomSousRubriques[2][0] = 'Communication';
nomSousRubriques[2][1] = 'Arts graphiques';
nomSousRubriques[2][2] = 'Direction Industrielle';
nomSousRubriques[2][3] = 'Finance';
nomSousRubriques[2][4] = 'Informatique';
nomSousRubriques[2][5] = 'Qualité';
nomSousRubriques[2][6] = 'Marketing Groupe';
nomSousRubriques[2][7] = 'Exploitation internationale';
nomSousRubriques[2][8] = 'Département Nouvelles Technologies';
nomSousRubriques[3][0] = 'Globe';
nomSousRubriques[3][1] = '4D';
nomSousRubriques[3][2] = 'Harmony';
nomSousRubriques[3][3] = 'Monitor';
nomSousRubriques[3][4] = 'Planigrama-Madrid';
nomSousRubriques[4][0] = 'France';
nomSousRubriques[4][1] = 'Royaume-Uni';
nomSousRubriques[4][2] = 'Finlande';
nomSousRubriques[4][3] = 'Belgique';
nomSousRubriques[5][0] = 'AirportNet';
nomSousRubriques[5][1] = 'Airport France';
}
else // UK
{
nomSousRubriques[0][0] = 'Press release';
nomSousRubriques[0][1] = 'news flash';
nomSousRubriques[1][0] = 'Presentations & documents';
nomSousRubriques[1][1] = 'History of the Group';
nomSousRubriques[1][2] = 'Adverts of the Group';
nomSousRubriques[1][3] = 'Corporate identity';
nomSousRubriques[1][4] = 'Web sites of the Group';
nomSousRubriques[2][0] = 'Communications';
nomSousRubriques[2][1] = 'Graphic design';
nomSousRubriques[2][2] = 'Industrial';
nomSousRubriques[2][3] = 'Finance';
nomSousRubriques[2][4] = 'IT';
nomSousRubriques[2][5] = 'Quality';
nomSousRubriques[2][6] = 'Group Marketing';
nomSousRubriques[2][7] = 'International Operations';
nomSousRubriques[2][8] = 'High-tech Department';
nomSousRubriques[3][0] = 'Globe';
nomSousRubriques[3][1] = '4D';
nomSousRubriques[3][2] = 'Harmony';
nomSousRubriques[3][3] = 'Monitor';
nomSousRubriques[3][4] = 'Planigrama-Madrid';
nomSousRubriques[4][0] = 'France';
nomSousRubriques[4][1] = 'UK';
nomSousRubriques[4][2] = 'Finland';
nomSousRubriques[4][3] = 'Belgium';
nomSousRubriques[5][0] = 'AirportNet';
}
// LIENS DES SOUS RUBRIQUES
if (langage=='FR')
{
lienSousRubriques[0][0] = '#a';
lienSousRubriques[0][1] = '#b';
lienSousRubriques[1][0] = '#c';
lienSousRubriques[1][1] = '#d';
lienSousRubriques[1][2] = '#e';
lienSousRubriques[1][3] = '#f';
lienSousRubriques[1][4] = '#g';
lienSousRubriques[2][0] = '#h';
lienSousRubriques[2][1] = '#i';
lienSousRubriques[2][2] = '#j';
lienSousRubriques[2][3] = '#k';
lienSousRubriques[2][4] = '#l';
lienSousRubriques[2][5] = '#m';
lienSousRubriques[2][6] = '#n';
lienSousRubriques[2][7] = '#o';
lienSousRubriques[2][8] = '#p';
lienSousRubriques[3][0] = '#q';
lienSousRubriques[3][1] = '#r';
lienSousRubriques[3][2] = '#s';
lienSousRubriques[3][3] = '#t';
lienSousRubriques[3][4] = '#u';
lienSousRubriques[4][0] = '#v';
lienSousRubriques[4][1] = '#w';
lienSousRubriques[4][2] = '#x';
lienSousRubriques[4][3] = '#y';
lienSousRubriques[5][0] = '#z';
lienSousRubriques[5][1] = '#a';
}
else // UK
{
lienSousRubriques[0][0] = '#a';
lienSousRubriques[0][1] = '#b';
lienSousRubriques[1][0] = '#c';
lienSousRubriques[1][1] = '#d';
lienSousRubriques[1][2] = '#e';
lienSousRubriques[1][3] = '#f';
lienSousRubriques[1][4] = '#g';
lienSousRubriques[2][0] = '#h';
lienSousRubriques[2][1] = '#i';
lienSousRubriques[2][2] = '#j';
lienSousRubriques[2][3] = '#k';
lienSousRubriques[2][4] = '#l';
lienSousRubriques[2][5] = '#m';
lienSousRubriques[2][6] = '#n';
lienSousRubriques[2][7] = '#o';
lienSousRubriques[2][8] = '#p';
lienSousRubriques[3][0] = '#q';
lienSousRubriques[3][1] = '#r';
lienSousRubriques[3][2] = '#s';
lienSousRubriques[3][3] = '#t';
lienSousRubriques[3][4] = '#u';
lienSousRubriques[4][0] = '#v';
lienSousRubriques[4][1] = '#w';
lienSousRubriques[4][2] = '#x';
lienSousRubriques[4][3] = '#y';
lienSousRubriques[5][0] = '#z';
}

//////////////////////////////////
// NE RIEN MODIFIER A PARTIR D'ICI
//////////////////////////////////

// POSITIONNEMENT AUTOMATIQUE DES SOUS RUBRIQUES EN FONCTIONS DE LA LARGEUR DES RUBRIQUES
posXPop = new Array;
posXPop[0] = -1;
posXPop[1] = 19+largeurRubriques[0]+25-1;
for(var r=2;r<=nbreRubriques-1;r++)
{
rPrec=r-1;
posXPop[r] = posXPop[rPrec]+largeurRubriques[rPrec]+25;
}

// DEFINITION DES SEPARATEURS
sep = new Array;
for(var r=0;r<=nbreRubriques;r++)
{
sep[r]='sep'+r;
}

// DEFINITION DU NOMBRE DE RUBRIQUES
zlien = new Array;
for(var r=0;r<=nbreRubriques-1;r++)
{
zlien[r] = new Array;
// DEFINITION DU NOMBRE DE SOUS RUBRIQUES PAR RUBRIQUES
for(var sr=0;sr<=nbreSousRubriques[r]-1;sr++)
{
zlien[r][sr] = '<A HREF="'+lienSousRubriques[r][sr]+'" class=bleuFonce10>'+nomSousRubriques[r][sr]+'</A>';
}
}
// RECUPERATION DU LAYER CORRESPONDANT AUX SOUS RUBRIQUES ET POSITIONNEMENT
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { skn = document.topdeck;}
else if (dom) { skn = document.getElementById("topdeck").style;}
else if (iex) { skn = topdeck.style;}
skn.top = posYmenu+hauteur_ligne_menu+1; // +1 pour la ligne claire en bas du tableau du menu principal

// RESET DES SEPARATEURS
function etatSep(sepPrec,sepSuiv,src)
{
if (gauche==posXPop[0]) { sepPrec.src=image_sep0_off.src; sepSuiv.src=image_sep.src; }
for(var r=1;r<=nbreRubriques-1;r++)
{
r1=r+1;
if (gauche==posXPop[r]) {sepPrec.src=image_sep.src; sepSuiv.src=image_sep.src;}
}
kill();
src.style.background=bgcolor;
src.style.color="#FFFFFF";
}

// EFFACEMENT DES SOUS RUBRIQUES
function effacerpop(menu,gauche,pos2,sepPrec,sepSuiv)
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
for(var r=0;r<=nbreRubriques-1;r++)
{
if (gauche==posXPop[r]){hauteurMax=(posYmenu+hauteur_ligne_menu+1)+((zlien[r].length)*hauteur_ligne_pop); largeurMax=gauche+largeur_pop[r]}
}
hauteur2=(posYmenu+hauteur_ligne_menu+1);
if ((x<gauche+3) || (x>(largeurMax)) || (y>hauteurMax))
{
etatSep(sepPrec,sepSuiv,menu);
}
if (y<=hauteur2+2)
{
if ((pos2==posXPop[0]) && ((x<gauche+2) || (x>posXPop[1]-25))) {sepPrec.src=image_sep0_off.src; sepSuiv.src=image_sep.src; menu.style.background=bgcolor; menu.style.color="#FFFFFF"; kill(); }

for(var r=1;r<=nbreRubriques-1;r++)
{
if ((pos2==posXPop[r]) && ((x<gauche+2) || (x>(posXPop[r]+largeurRubriques[r]))))
{
etatSep(sepPrec,sepSuiv,menu);
}
}
}
}

// AFFICHAGE DES SOUS RUBRIQUES
function pop(src,msg,pos)
{
menu=src;
skn.visibility = "hidden";
a=true
skn.left = posXmenu+pos;
gauche=posXmenu+pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='"+bgcolor2+"'>";

pass = 0
while (pass < msg.length)
{
pos2=pos;
content += "<TR>";
content += "<TD bgcolor='"+bgcolor3+"'><img src='picts/tdot.gif' width=1 height=1 alt='' border=0></TD>";

for(var r=0;r<=nbreRubriques-1;r++)
{
r1=r+1;
if (pos==posXPop[r]){content += "<TD BGCOLOR="+bgcolor2+" onMouseOut=\"effacerpop(menu,gauche,pos2,"+sep[r]+","+sep[r1]+");\" onClick=\"menuOff(menu,gauche,1,"+sep[r]+","+sep[r1]+");\" HEIGHT="+hauteur_ligne_pop+" class=bleuFonce10 width="+largeur_pop[r]+"> <img src='picts/icones/ico_menuGauche.gif' width='13' height='7' alt='' border='0'> "+msg[pass]+"</TD>";}
}
content += "<TD bgcolor='"+bgcolor3+"'><img src='picts/tdot.gif' width=1 height=1 alt='' border=0></TD>";
content += "</TR>";
pass++;
}
content += "<TR>";
content += "<TD colspan=3 bgcolor='"+bgcolor3+"'><img src='picts/tdot.gif' width=1 height=1 alt='' border=0></TD>";
content += "</TR>";
content += "</TABLE>";
if (nava)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (dom)
{
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
src.style.background=bgcolor2;
src.style.color=bgcolor;
}

function menuOff(src,gauche,etat,sepPrec,sepSuiv)
{
if (etat==1)
{
etatSep(sepPrec,sepSuiv,src);
}
else
{
var x = event.x+document.body.scrollLeft;
var y = event.y+document.body.scrollTop;
hauteurMax=(posYmenu+hauteur_ligne_menu+1);
if (y<hauteurMax+2)
{
etatSep(sepPrec,sepSuiv,src);
}
if (y==hauteurMax+2)
{
if (x<=gauche+3)
{
etatSep(sepPrec,sepSuiv,src);
}
}
}
}

function kill()
{
skn.visibility = "hidden";
}

document.onclick = kill;

//CONSTRUCTION DU MENU DHTML AU CHARGEMENT DE LA PAGE
document.write('<DIV ID=topgauche><table cellpadding=0 cellspacing=0 border=0 bgcolor="'+bgcolor+'" width="300">')
document.write('<tr>')
document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="19" height="1" alt="" border="0"></td>')
for(var r=0;r<=nbreRubriques-1;r++)
{
if(r==0){sepDroite='sep0_on';}else{sepDroite='sep_droite';}
r1=r+1;
document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width='+largeurRubriques[r]+' height="1" alt="" border="0"></td>')
document.write('<td bgcolor="'+bgcolor2+'"><img src="picts/tdot.gif" width="25" height="1" alt="" border="0"></td>')
}
document.write('</tr>')
document.write('<tr>')
document.write('<td onClick="menuOff(this,posXPop[0],1,'+sep[0]+','+sep[1]+');"><img src="'+image_sep0_off.src+'" width="19" height="'+hauteur_ligne_menu+'" alt="" border="0" name="'+sep[0]+'"></td>')
for(var r=0;r<=nbreRubriques-1;r++)
{
if(r==0){sepDroite='sep0_on';}else{sepDroite='sep_droite';}
r1=r+1;
document.write('<td align=center class=blanc12 onMouseOver="pop(this,zlien['+r+'],posXPop['+r+']);'+sep[r]+'.src=image_'+sepDroite+'.src;'+sep[r1]+'.src=image_sep_gauche.src;" onMouseOut="menuOff(this,posXPop['+r+'],0,'+sep[r]+','+sep[r1]+');" onClick="menuOff(this,posXPop['+r+'],1,'+sep[r]+','+sep[r1]+');">'+nomRubriques[r]+'</td>')
document.write('<td onClick="menuOff(this,posXPop['+r+'],1,'+sep[r]+','+sep[r1]+');"><img src="'+image_sep.src+'" width="25" height="'+hauteur_ligne_menu+'" alt="" border="0" name="'+sep[r1]+'"></td>')
}
document.write('</tr>')
document.write('</table></div>')