Problème de menu javascript
Dernière réponse : dans Programmation
Es ce que quelqu'un saurais modifier ce menu(http://download4.mangasteam.free.fr/menu_toutNAV.rar) pour qu'il s'affiche au click uniquement et qu'il disparaisse quand on enlève la souris de ce menu. Merci de m'aider ce serais vraiment sympas.
Autres pages sur : probleme menu javascript
Lassé par la pub ? Créez un compte
Mon menu.js
window.status = "Menu";
posXmenu = 50; //distance entre le bord gauche de l'écran et le côté gauche du menu
posYmenu = 50; //distance entre le bord supérieur de l'écran et le haut du menu
bgcolor = '#FF0000'; //couleur du menu
bgcolor2 = 'orange'; //couleur des cellules survolées
sousmenu = new Array; //création d'un tableau
sousmenu[0] = new Array; //création d'un tableau dans le tableau
sousmenu[1] = new Array;
sousmenu[2] = new Array;
sousmenu[3] = new Array;
sousmenu[0][0] = ''; //on enregistre les liens dans un éléments du tableau (de tableau)
sousmenu[0][1] = '';
sousmenu[0][2] = '';
sousmenu[0][3] = '';
sousmenu[0][4] = '';
sousmenu[1][0] = '';
sousmenu[1][1] = '';
sousmenu[2][0] = '';
sousmenu[2][1] = '';
sousmenu[2][2] = '';
sousmenu[2][3] = '';
sousmenu[2][4] = '';
sousmenu[2][5] = '';
sousmenu[2][6] = '';
sousmenu[2][7] = '';
sousmenu[2][8] = '';
sousmenu[2][9] = '';
sousmenu[2][10] = '';
sousmenu[3][0] = '';
sousmenu[3][1] = '';
sousmenu[3][2] = '';
sousmenu[3][3] = '';
sousmenu[3][4] = '';
sousmenu[3][5] = '';
dom = document.getElementById; //test de compatibilité du navigateur plus rapide
document.write('<style type = "text/css">'); //on écrit dans une page HTML qui contiendra le script d'une feuille de style qui définit la couleur des liens du menu
document.write('A:hover.menu {color:white; text-decoration:none;}');
document.write('A.menu {color:white; text-decoration:none;}');
document.write('</style>');
if(dom)
document.getElementById("cadremenu").style.top = posYmenu+24; //on place l'élément cadremenu à 24 pixels sous le haut du menu fixe
function SousMenu(msg,pos){
if(dom){ //si le navigateur est compatible
document.getElementById("cadremenu").style.left = posXmenu+pos; //position du sous-menu en fonction de pos et de la position du menu principal
var tab = "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>"; //début de tableau HTML
for(pass=0;pass < msg.length;pass++){ //boucle qui va s'exécuter autant de fois qu'il y a de liens enregistrés dans le tableau passé en paramètre msg
tab += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\"HEIGHT=20><FONT SIZE=1 FACE=\"Verdana\">"+msg[pass]+"</FONT></TD></TR>"; //on ajoute à la variable tab une ligne de tableau HTML contenant un lien. Avec onMouseOver et onMouseOut : changement de couleur de la cellule au passage de la souris.
}
tab += "</TABLE></TD></TR></TABLE>"; //on ajoute les codes HTML qui vont fermer les tableaux
document.getElementById("cadremenu").innerHTML = tab; //on écrit le contenu de la variable tab dans l'élément dont l'ID est cadremenu
document.getElementById("cadremenu").style.visibility = "visible"; //on rend l'élément visible
}
}
function KillFenetre(){
if(dom)
document.getElementById("cadremenu").style.visibility = "hidden";
}
document.onclick = KillFenetre; //fait disparaitre le sous menu lorsqu'un clic est détecté sur la page
if(dom){
document.write('<DIV STYLE="position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10;"><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=500><TR><TD><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25><TR>'); //on écrit le tableau contenu dans les balises DIV sans ID dans lesquelles on définit son style. La position est absolue. Placement sur la page définie avec posXmenu et posYmenu
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Accueil</FONT></A></TD>'); //largeur de 100 pixels -- couleur de fond -- une instruction javascript pour changer la couleur de la cellule et lancer la fonction SousMenu() -- instruction qui fait repasser la couleur de la cellule à sa couleur originale quand la souris ne la survole pas
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[1],100)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Le manga ?</FONT></A></TD>');
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[2],200)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Nos dossiers</FONT></A></TD>');
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Divers</FONT></A></TD>');
document.write('</TR></TABLE></TD></TR></TABLE></DIV>');
}
Bon courage et merci de vous penchez sur la question :-D
window.status = "Menu";
posXmenu = 50; //distance entre le bord gauche de l'écran et le côté gauche du menu
posYmenu = 50; //distance entre le bord supérieur de l'écran et le haut du menu
bgcolor = '#FF0000'; //couleur du menu
bgcolor2 = 'orange'; //couleur des cellules survolées
sousmenu = new Array; //création d'un tableau
sousmenu[0] = new Array; //création d'un tableau dans le tableau
sousmenu[1] = new Array;
sousmenu[2] = new Array;
sousmenu[3] = new Array;
sousmenu[0][0] = ''; //on enregistre les liens dans un éléments du tableau (de tableau)
sousmenu[0][1] = '';
sousmenu[0][2] = '';
sousmenu[0][3] = '';
sousmenu[0][4] = '';
sousmenu[1][0] = '';
sousmenu[1][1] = '';
sousmenu[2][0] = '';
sousmenu[2][1] = '';
sousmenu[2][2] = '';
sousmenu[2][3] = '';
sousmenu[2][4] = '';
sousmenu[2][5] = '';
sousmenu[2][6] = '';
sousmenu[2][7] = '';
sousmenu[2][8] = '';
sousmenu[2][9] = '';
sousmenu[2][10] = '';
sousmenu[3][0] = '';
sousmenu[3][1] = '';
sousmenu[3][2] = '';
sousmenu[3][3] = '';
sousmenu[3][4] = '';
sousmenu[3][5] = '';
dom = document.getElementById; //test de compatibilité du navigateur plus rapide
document.write('<style type = "text/css">'); //on écrit dans une page HTML qui contiendra le script d'une feuille de style qui définit la couleur des liens du menu
document.write('A:hover.menu {color:white; text-decoration:none;}');
document.write('A.menu {color:white; text-decoration:none;}');
document.write('</style>');
if(dom)
document.getElementById("cadremenu").style.top = posYmenu+24; //on place l'élément cadremenu à 24 pixels sous le haut du menu fixe
function SousMenu(msg,pos){
if(dom){ //si le navigateur est compatible
document.getElementById("cadremenu").style.left = posXmenu+pos; //position du sous-menu en fonction de pos et de la position du menu principal
var tab = "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>"; //début de tableau HTML
for(pass=0;pass < msg.length;pass++){ //boucle qui va s'exécuter autant de fois qu'il y a de liens enregistrés dans le tableau passé en paramètre msg
tab += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\"HEIGHT=20><FONT SIZE=1 FACE=\"Verdana\">"+msg[pass]+"</FONT></TD></TR>"; //on ajoute à la variable tab une ligne de tableau HTML contenant un lien. Avec onMouseOver et onMouseOut : changement de couleur de la cellule au passage de la souris.
}
tab += "</TABLE></TD></TR></TABLE>"; //on ajoute les codes HTML qui vont fermer les tableaux
document.getElementById("cadremenu").innerHTML = tab; //on écrit le contenu de la variable tab dans l'élément dont l'ID est cadremenu
document.getElementById("cadremenu").style.visibility = "visible"; //on rend l'élément visible
}
}
function KillFenetre(){
if(dom)
document.getElementById("cadremenu").style.visibility = "hidden";
}
document.onclick = KillFenetre; //fait disparaitre le sous menu lorsqu'un clic est détecté sur la page
if(dom){
document.write('<DIV STYLE="position:absolute; top:'+posYmenu+'px; left:'+posXmenu+'px; z-index:10;"><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=500><TR><TD><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=25><TR>'); //on écrit le tableau contenu dans les balises DIV sans ID dans lesquelles on définit son style. La position est absolue. Placement sur la page définie avec posXmenu et posYmenu
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Accueil</FONT></A></TD>'); //largeur de 100 pixels -- couleur de fond -- une instruction javascript pour changer la couleur de la cellule et lancer la fonction SousMenu() -- instruction qui fait repasser la couleur de la cellule à sa couleur originale quand la souris ne la survole pas
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[1],100)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Le manga ?</FONT></A></TD>');
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[2],200)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Nos dossiers</FONT></A></TD>');
document.write('<TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\'; SousMenu(sousmenu[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A CLASS=menu><FONT SIZE=1 FACE="Verdana">Divers</FONT></A></TD>');
document.write('</TR></TABLE></TD></TR></TABLE></DIV>');
}
Bon courage et merci de vous penchez sur la question :-D
Tout est là (http://download4.mangasteam.free.fr/menu_toutNAV.rar). Je ne peux pas faire mieux, désolé.
Je tiens à vous remercier de prendre avec attention mon cas. Merci beaucoup ^^
Je tiens à vous remercier de prendre avec attention mon cas. Merci beaucoup ^^
Avec le temps les problème se décalent. En effet j'ai réussi à faire qu'il s'ouvre au clique mais maintenant je souhaiterais modifier cette ligne :
document.onClick = KillFenetre;
pour que le menu se ferme au boutd'un certain temps. Alors j'ai essayer, onClick, onMouseOut et celà ne marche pas, si quelqu'un à une idée elle est la bienvenue.
Merci d'avance.
document.onClick = KillFenetre;
pour que le menu se ferme au boutd'un certain temps. Alors j'ai essayer, onClick, onMouseOut et celà ne marche pas, si quelqu'un à une idée elle est la bienvenue.
Merci d'avance.
Lassé par la pub ? Créez un compte
- Contenus similaires :
Tags :
- ForumImage menu javascript
- ForumCentrer menu javascript css
- ForumMenu javascript horizontal déroulant
- ForumComment faire un menu en javascript
- ForumMenu javascript avec slide
- ForumMenu javascript
- ForumMenu javascript horizontal
- ForumProbleme avec menu javascript sur page php
- ForumMenu en javascript dans pages en php
- ForumMenu en javascript horizontal
- Voir plus