Bonjour, je me sers du menu xp qui fonctionne très bien sous Mozilla seul problème la page que je construis est destinée à des utilisteurs utilisant Internet explorer version 6 ou 7 et je n'arive pas à ajouter des liens en plus à mon menu ni à l'agrandir ( rajouter un titre avec d'autres liens).Je sais bien que l'explication est dans le script du menu mais quand je fais ce qui est expliqué certaines parties de mon menu disparaissent et se montent les une sur les autres.
merci d'avance cinthia
Mon code est le suivant:
Menu:<html>
<head>
<title></title>
<SCRIPT LANGUAGE="javascript" src="Scripts/dhtmllib_lite.js"></SCRIPT>
<SCRIPT language = "JavaScript" src = "Scripts/XPFileMenu.js"></SCRIPT>
<base target="principal">
</head>
<body bgcolor="#D6DFF7" style="Color: #83F6C0; background-color:#000000" background="Images/fond.gif">
<p align="left"> <SCRIPT language = "JavaScript">
/* Création d'un menu
MenuObject( Id, ImagePath, IdImg, Libellé )
Création d'une option
MenuObject.CreateOption( Id, ibellé, LienPage, Passage de paramètre dans le lien, CibleLien, ImagePath )
Initialisation du menu général
InitMenu( PosX, PosY, séparation entre les différents 'MenuObjects', Est-ce que le fader doit se déclencher)
/!\: Cette fonction doit-être inscrite avant tout. Si vous ne a mettez pas des valeurs, il y a des valeurs par défauts.
StartMenu()
Ecriture du menu
*/
InitMenu(27,60,1,false);
var mnuAdmin = new MenuObject("mnuAdmin", "Images/Img.bmp", "ImgAdmin", "Lettres-Histoire");
mnuAdmin.CreateOption("lnkAddFile", "Français", "Truc.htm", "", "_self", "Images/france.png");
mnuAdmin.CreateOption("lnkSearchFile", "Histoire", "mailto:Administrateur@CrackSys.net", "", "_self", "Images/mail.gif");
var mnuNav = new MenuObject("mnuNav", "Images/Img.bmp", "ImgNav", "Langues");
mnuNav.CreateOption("lnkAcceuil", "Anglais", "Main.html", "", "_self", "Images/usa.png");
mnuNav.CreateOption("lnkPrec", "Anglais 2", "javascript:history.back()", "", "_self","Images/usa.png");
var mnuActeur = new MenuObject("mnuActeur", "Images/Img.bmp", "ImgActeur", "Maths-Sciences");
mnuActeur.CreateOption("lnkAct1", "Maths", "Bruce.htm", "", "_self", "Images/maths.png");
mnuActeur.CreateOption("lnkAct2", "Sciences", "Mel.htm", "", "_self", "Images/sciences.png");
mnuActeur.CreateOption("lnkAct3", "Electricité", "John.htm", "", "_self", "Images/electricite.png");
var mnuDivers = new MenuObject("mnuDivers", "Images/Img.bmp", "ImgDivers", "Compta-Communication");
mnuDivers.CreateOption("lnkAss", "Compta", "Portesouvertes.htm", "", "_self", "Images/ass.gif");
mnuDivers.CreateOption("lnkCrop", "Communication", "Crop.htm", "", "_self", "Images/comm.png");
var mnuOthers = new MenuObject("mnuOthers", "Images/Img.bmp", "ImgLink", "Eco-Droit-Gestion");
mnuOthers.CreateOption("lnkMail", "Eco", "mailto:Sebastien@CrackSys.net", "", "_self", "Images/eco.gif");
mnuOthers.CreateOption("lnkGuest", "Gestion", "Guest.htm", "", "_self", "Images/img.gif");
*/pour creer un lien moi j'ajoute ici: mnuOthers.CreateOption("lnkGuest", "truc", "truc.htm", "", "_self", "Images/truc.gif"); cela ajoute le lien mais fais "beuguer" mon menu"
et pour creer un menu j'ajoute:var mnuExemple = new MenuObject("mnuExemple", "Images/Img.bmp", "ImgLink", "Eco-Droit-Gestion");
mnuExemple.CreateOption("lnkMail", "Eco", "mailto:Sebastien@CrackSys.net", "", "_self", "Images/eco.gif");
mnuExemple.CreateOption("lnkGuest", "Gestion", "Guest.htm", "", "_self", "Images/img.gif");cela ajoute le menu mais l'autre lui monte dessus et il "beugue" /* StartMenu();
</SCRIPT>
<p align="left"> <p align="left">
</body>
</html>
JAVASCRIPT:
// -= Variables globales =-
//==========================
var Interval = 50;
var SumInt = 0;
var imgOButton = "Images/OButton.jpg";
var imgFButton = "Images/FButton.jpg";
var PosXStart = 0;
var PosYStart = 0;
var intSepar = 20;
var bFader = false;
var strFader = "filter: alpha(opacity=0);";
var arrListMenu = new Array();
// -= Fonctions =-
//=================
function DoNothing() {}
function StartMenu(){
for( var i = 0; i < arrListMenu.length; i++ ) fctWrite(i);
}
function InitMenu( StartX, StartY, Separ, Fader ){
PosXStart = StartX;
PosYStart = StartY;
intSepar = Separ;
bFader = Fader;
}
function getObject( id ){
for( var Cpt = 0; Cpt < arrListMenu.length; Cpt++ ){
if( id == arrListMenu[Cpt].Name ) return arrListMenu[Cpt];
for( var Cpt2 = 0; Cpt2 < arrListMenu[Cpt].Option.length; Cpt2++ ){
if( id == arrListMenu[Cpt].Option[Cpt2].Name ) return arrListMenu[Cpt].Option[Cpt2];
}
}
}
function fctMove( strObj, intTo, intVitesse ){
// But: Bouger le menu de sa position 'Y' actuelle vers la position 'Y' "intTo".
// Event: /
// Param.: - Index = Numéro du menu.
// - intTo = Position 'Y' finale du menu ou de l'option.
// - intVitesse = Vitesse de mouvement.
var Obj = getObject( strObj );
if( parseInt(intTo) != Obj.PosY ){
if( parseInt(intTo) < Obj.PosY ){
Obj.PosY -= 5 * intVitesse;
if( Obj.PosY <= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
}
else {
Obj.PosY += 5 * intVitesse;
if( Obj.PosY >= parseInt(intTo) ) Obj.PosY = parseInt(intTo);
}
document.getElementById( Obj.Name ).style.top = Obj.PosY;
setTimeout("fctMove('" + Obj.Name + "', " + intTo + ", " + intVitesse + ")", Interval);
}
}
function fctAnim( Index ){
// But: Animation du menu
// Event: Qd on clique sur l'en-tête du menu.
// Param.: - Index = Numéro du menu.
var Menu = arrListMenu[Index];
var To = 0;
var intCpt = 0;
if( !Menu.isShowed ){
document.getElementById( Menu.ImageName ).src = "Images/FButton.jpg";
if( bFader ) fctSetOpacity(Index, "+");
else document.getElementById( Menu.OptionName ).style.display = "";
for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
fctMove(Menu.Option[intCpt].Name, 0, intCpt);
To += 20;
}
for( intCpt = Menu.Index + 1; intCpt < arrListMenu.length; intCpt++ ){
fctMove(arrListMenu[intCpt].Name, To + arrListMenu[intCpt].PosY, Menu.Option.length + 1 );
}
Menu.isShowed = true;
}
else {
document.getElementById( Menu.ImageName ).src = "Images/OButton.jpg";
if( bFader ) fctSetOpacity(Index, "-");
for( intCpt = 0; intCpt < Menu.Option.length; intCpt++){
fctMove(Menu.Option[intCpt].Name,-30*(intCpt), intCpt + 1);
To += 20;
SumInt += Interval/2;
}
for( intCpt = Index + 1; intCpt < arrListMenu.length; intCpt++ ){
fctMove(arrListMenu[intCpt].Name, arrListMenu[intCpt].PosY - To, Menu.Option.length + 1 );
SumInt += Interval/2;
}
Menu.isShowed = false;
if( !bFader ) setTimeout("document.getElementById('" + Menu.OptionName + "').style.display = 'none'", SumInt);
SumInt = 0;
}
}
function fctSetOpacity( Index, strOp ){
// But: Initialisé l'opacité du menu.
// Event: /
// Param.: - Index = Numéro du menu.
// - strOp = Opération à effectuer sur l'opcaté du menu
var Menu = arrListMenu[Index];
if( Menu.Opac <= 101 && Menu.Opac >= -1 ){
if( strOp == "+" ){
Menu.Opac = Menu.Opac + 20;
}
else {
Menu.Opac = Menu.Opac - 20;
}
for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name).filters.alpha.opacity = Menu.Opac;
document.getElementById( Menu.OptionName).style.display = "";
setTimeout("fctSetOpacity(" + Index + ", '" + strOp + "')", Interval);
}
else {
if( strOp == "+" ){
Menu.Opac = 100;
}
else {
Menu.Opac = 0;
document.getElementById( Menu.OptionName).style.display = "none";
}
for( var i = 0; i < Menu.Option.length; i++ ) document.getElementById( Menu.Option[i].Name ).filters.alpha.opacity = Menu.Opac;
}
}
function fctWrite( Index ){
// But: Ecriture du menu dans le browser.
// Event: /
var strRBorder = "solid";
var strLBorder = "solid";
var strBBorder = "none";
var strReturn = "";
var Menu = arrListMenu[Index];
strReturn += "<table border='0' width = '204' summary='' cellpadding = '0' cellspacing = '0' style='Position:absolute;top:" + Menu.PosY + ";left:" + Menu.PosX + ";' id = '" + Menu.Name + "'>"
strReturn += "<tr style='z-index:1'><td><table border='0' summary='' cellpadding = '0' cellspacing = '0' style=''><tr onClick = \"fctAnim(" + Index + ")\" style='cursor:hand;'>";
strReturn += "<td height = '25' width = '16'><img src='Images/LBorder.jpg' border='0' width='16' height='25' alt=''></td>";
//strReturn += "<td><img src='" + Menu.Image + "' border='0' width='52' height='52' align='right'></td>";
strReturn += "<td height = '25' width = '161' background='Images/bgHeader.jpg' style='color: #3399FF;font: bold Tahoma;'>" + Menu.Caption + "</td>";
strReturn += "<td><img id='" + Menu.ImageName + "' src='Images/OButton.jpg' border='0' width='22' height='25' alt=''></td>";
strReturn += "<td height = '25' width = '5'><img src='Images/RBorder.jpg' border='0' width='5' height='25' alt=''></td>";
strReturn += "</tr></table></td></tr><tr style=''><td>";
strReturn += "<table border='0' width='100%' cellpadding='0' cellspacing='0' id='" + Menu.OptionName + "' style=';z-index:0;display: none'>";
for( var intCpt = 0; intCpt < Menu.Option.length; intCpt++ ){
if( Menu.Option.length-1 == intCpt ){
strBBorder = "solid";
}
strReturn += "<tr id='" + Menu.Option[intCpt].Name + "' style='position: relative; top:" + Menu.Option[intCpt].PosY + "; left:" + Menu.Option[intCpt].PosX + ";z-index: 0;" + ((bFader)? strFader : "") + "'>";
strReturn += "<td height = '15' width = '1%' style = 'border-style: none none " + strBBorder + " " + strLBorder + "; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #D6DFF7;'> </td>";
strReturn += "<td height = '15' width = '1%' style = 'border-style: none none " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #D6DFF7;'><img src='" + Menu.Option[intCpt].Image + "' border='0' width='16' height='16' align='left'></td>";
strReturn += "<td height = '15' style = 'border-style: none none " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #D6DFF7;'><a href = '" + Menu.Option[intCpt].Links + Menu.Option[intCpt].Param + "' Target = '" + Menu.Option[intCpt].Target + "' style='color:#E6F6F2'> " + Menu.Option[intCpt].Caption + " </a></td>";
strReturn += "<td height = '15' width = '1%' style = 'border-style: none " + strRBorder + " " + strBBorder + " none; border-color: #E6F6F2; border-width: 1; color: #E6F6F2; background: #D6DFF7;'> </td>";
}
strReturn += "</tr></Table></td></tr></table>";
document.write( strReturn );
}
function fctCreateOption( strName, strTitre, strHref, strParam, strTarget, strImage){
this.Option[this.Option.length] = new OptionObject(strName, strTitre, strHref, strParam, strTarget, strImage, 0, -30*(this.Option.length));
}
// -= Objet "Menu" =-
//====================
function MenuObject( strMenuName, strImage, strImageName, strTitre, intPosX, intPosY ){
this.Name = strMenuName;
this.Image = strImage;
this.ImageName = strImageName;
this.Caption = "<font face=Tahoma color=#215DC6><b><span style='font-size: 8pt'>" + strTitre + "</span></b></font>";
this.PosX = PosXStart;
this.PosY = PosYStart + arrListMenu.length * (35 + intSepar);
this.OptionName = strMenuName + "Option";
this.isShowed = false;
this.Opac = 0;
this.Index = arrListMenu.length;
arrListMenu[arrListMenu.length] = this;
this.Option = new Array();
this.CreateOption = fctCreateOption;
}
// -= Objet "Option " =-
//======================
function OptionObject( strName, strTitre, strHref, strParam, strTarget, strImage, intPosX, intPosY){
this.PosX = intPosX;
this.PosY = intPosY;
this.Name = strName;
this.Image = strImage;
this.Caption = "<font face=tahoma color=#215DC6><span style='font-size: 8pt'>" + strTitre + "</span></font>";
this.Param = strParam;
this.Target = strTarget;
this.Links = strHref;
}