Menu animé
Description
Ce programme gère un menu dont la liste des option se déroule en "temps réel".
Les liens du menu vont s'ouvrir dans une iframe (frame flottante) et ces lien peuvent aussi bien être
dans les option du menu déroulant que dans les rubriques du menu.
Le code est trés dur à lire car je ne l'ai pas beaucoup commenté mais pour contruire le menu il n'y a
pas besoin de connaitre tout le fonctionnement du script, seule les dernières lignes sont
importantes(celles du body en fait et elles sont en plus assez bien commentées).
---------------------------------------------
Mise à jour du 24 Avril 2004 : compatibilité avec les navigateur et extention des nom des images.
- le script marche maintenant trés bien sous netscape 7.0 (pas du tout sur le 4.7), mozilla 6.0, et bien sûr sur internet explorer (version 6). Sous opera 7 il marche aussi sauf qu'il y a un petit problème avec la hateur de certaines cellules de tableaux ainsi qu'avec la iframe : elle se place toujous en premier plan (le z-index est apparement mal géré par opera). Mais bon, il suffit d'afficher le contenu des page directement sur la page (en pensant bien à décaler tous le contenu pour qu'il ne soit pas caché par le menu) et le tour est joué.
- j'ai rajouté une variable en début de fichier (la variable extention) qui permet de changer trés facilement l'extention des images utilisées. Avant si on voulait convertir les images de bmp en gif il fallait changer toues les extentions dans le fichier. Maintenant il suffit de changer la valeur de cette variable (de ".bmp" en ".gif" dans l'exmple précédent).
J'ai été surpris par la facilité avec laquelle j'ai pu mettre à jour le script notement en ce qui concerne la compatibilité avec les navigateurs (je pensais que ça allait me prendre beaucoup plus de temps; cela ne mais pris qu'une grosse heure).
!!!!!!
Je n'ai apparement pas pu uploader le nouveau zip et la nouvelle capture d'écran. Si vous voulez utiliser la nouvelle version du script, télécharger le zip, décompressez-le et remplacez le contenu du fichier menu exemple.htm par le code contenu dans le cadre ci-dessus, ça devrai marcher.
!!!!!!
Les liens du menu vont s'ouvrir dans une iframe (frame flottante) et ces lien peuvent aussi bien être
dans les option du menu déroulant que dans les rubriques du menu.
Le code est trés dur à lire car je ne l'ai pas beaucoup commenté mais pour contruire le menu il n'y a
pas besoin de connaitre tout le fonctionnement du script, seule les dernières lignes sont
importantes(celles du body en fait et elles sont en plus assez bien commentées).
Source / Exemple :
<html>
<head>
<SCRIPT LANGAGE="javascript">
var t_menu = new Array();
var liste_menu = new Array();
var extention = ".bmp";
function dessus(cell){
//cell.bgColor = "#0000FF";
}
function partir(cell){
//cell.bgColor = cell.parentNode.parentNode.parentNode.bgColor;
}
function reduire(cell){
//réduit le menu déroulant si on quitte sur le menu
var id_menu = cell.id;
t_menu[id_menu].ouvrir = -1;
}
function developper(cell){
//dévellope le menu déroulant si on passe sur le menu
var id_menu = cell.id;
t_menu[id_menu].ouvrir = 1;
if ((t_menu[id_menu].type_menu == 1) || (t_menu[id_menu].type_menu == 2))
document.getElementById("basongelet_" + id_menu).style.display = "block";
}
function reduire2(cell){
//réduit le menu déroulant si on quitte sur le menu déroulant
var id_menu = cell.id.substring(6, cell.id.length);
t_menu[id_menu].ouvrir = -1;
}
function developper2(cell){
//devellope le menu déroulant si on passe sur le menu déroulant
var id_menu = cell.id.substring(6, cell.id.length);
t_menu[id_menu].ouvrir = 1;
// document.write("<TABLE WIDTH='100%' HEiGHT='100%'><TR><TD>" + t_menu[id_menu].ouvrir + "</TD></TR></TABLE>");
if ((t_menu[id_menu].type_menu == 1) || (t_menu[id_menu].type_menu == 2))
document.getElementById("basongelet_" + id_menu).style.display = "block";
}
function reduire3(cell){
//réduit le menu déroulant si on quitte sur l'ombre sous le menu
var id_menu = cell.id.substring(11, cell.id.length);
t_menu[id_menu].ouvrir = -1;
}
function developper3(cell){
//devellope le menu déroulant si on passe sur l'ombre sous le menu
var id_menu = cell.id.substring(11, cell.id.length);
t_menu[id_menu].ouvrir = 1;
if ((t_menu[id_menu].type_menu == 1) || (t_menu[id_menu].type_menu == 2))
document.getElementById("basongelet_" + id_menu).style.display = "block";
}
function affmenu(){
for (a=0 ; a<liste_menu.length ; a++)
{
var idmenu = liste_menu[a];
//si on ouvre le menu et qu'il n'est pas complètement déroulé
//ou si on l'enroule et qu'il n'est pas complètement enroulé alors on fait bouger le menu déroulant
if ((t_menu[idmenu].ouvrir == 1)&&(t_menu[idmenu].nbrvar < t_menu[idmenu].nbrvarmax))
{
t_menu[idmenu].ypos_menu += t_menu[idmenu].vary;
t_menu[idmenu].xpos_menu += t_menu[idmenu].varx;
document.getElementById(idmenu).style.left = t_menu[idmenu].xpos_menu + "px";
document.getElementById(idmenu).style.top = t_menu[idmenu].ypos_menu + "px";
t_menu[idmenu].nbrvar += 1;
}
if ((t_menu[idmenu].ouvrir == -1)&&(t_menu[idmenu].nbrvar > 0))
{
t_menu[idmenu].ypos_menu -= t_menu[idmenu].vary;
t_menu[idmenu].xpos_menu -= t_menu[idmenu].varx;
document.getElementById(idmenu).style.top = t_menu[idmenu].ypos_menu + "px";
document.getElementById(idmenu).style.left = t_menu[idmenu].xpos_menu + "px";
t_menu[idmenu].nbrvar -= 1;
}
if ((t_menu[idmenu].nbrvar >= t_menu[idmenu].nbrvarmax)&&(t_menu[idmenu].ouvrir == 1))
{//completement développé
t_menu[idmenu].ouvrir = 0;
t_menu[idmenu].nbrvar = t_menu[idmenu].nbrvarmax;
}
if ((t_menu[idmenu].nbrvar <= 0)&&(t_menu[idmenu].ouvrir == -1))
{//complètement réduit
t_menu[idmenu].ouvrir = 0;
t_menu[idmenu].nbrvar = 0;
document.getElementById("basongelet_" + idmenu).style.display = "none";
}
}
}
function menu(nom, larg, haut, x, y, type_menu, larg_m, haut_m, x_m, y_m, varx, vary, nbrvmax, url){
var strtemp;
if ((type_menu == 1)||(type_menu == 3))
{// si le menu à créer se déroule vers le bas
//crée le menu
strtemp = '<DIV id="princ_' + nom + '" STYLE="position: absolute; left:' + x + '; top:' + y + '; width:' + larg + '; height:' + haut + '; z-index:4" onmouseover="developper2(this);" onmouseout="reduire2(this);">';;
strtemp += '<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" id="tab_princ' + nom + '" width="100%" height="100%">';
strtemp += '<tr><td width="10" background="bord_haut_7'+extention+'"> </td>';
strtemp += '<TD bgcolor="#8BBF2A" align="center"><b>';
strtemp += '<font face="Arial" size="2" color="#961C29">';
if (url == "")
strtemp += nom;
else
strtemp += '<a href="' + url + '" target="main_win" style="text-decoration: none">' + nom + '</a>';
strtemp += '</font></b></TD>';
strtemp += '<td width="10" background="bord_haut_3'+extention+'"> </td></tr><tr>';
strtemp += '<td background="bord_haut_6'+extention+'"><font size="1"> </font></td>';
strtemp += '<td background="bord_haut_5'+extention+'" height="17"><font size="1"> </font></td>'
strtemp += '<td background="bord_haut_4'+extention+'"><font size="1"> </font></td></tr></table>';
strtemp += '<TR><TD></TD></TR></TABLE></DIV>'
document.write(strtemp);
//crée le menu déroulant
strtemp = '<DIV id="' + nom + '" STYLE="position: absolute; left:' + x_m + 'px; top:' + y_m + 'px; width:' + larg_m + '; height:' + haut_m + '; z-index:3" onmouseover="developper(this);" onmouseout="reduire(this);">';
strtemp += '<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" id="tab_' + nom + '" width="100%" height="100%">';
strtemp += '<tr height="100%"><td background="onguelet_haut_7'+extention+'" width="16"></td><td bgcolor="#8BBF2A"></td>';
strtemp += '<td background="onguelet_haut_3'+extention+'" width="15"></td></tr>';
for (a=1 ; a<=menu.arguments.length-14 ; a=a+2)
{
strtemp += '<tr ><td background="onguelet_haut_7'+extention+'" width="16"></td>';
strtemp += '<td bgcolor="#8BBF2A" align="center"><b><font face="Arial" size="2" color="#961C29">'
strtemp += '<a href="' + menu.arguments[13 + a + 1] + '" target="main_win" style="text-decoration: none">' + menu.arguments[13 + a] + '</a>';
strtemp += '</font></b></td><td background="onguelet_haut_3'+extention+'" width="15"></td></tr>';
}
strtemp += '<tr><td background="onguelet_haut_6'+extention+'"><font size="1"> </font></td>';
strtemp += '<td background="onguelet_haut_5'+extention+'" height="17"><font size="1"> </font></td>';
strtemp += '<td background="onguelet_haut_4'+extention+'"><font size="1"> </font></td></tr></table>';
strtemp += '<TR><TD></TD></TR></TABLE></DIV>'
document.write(strtemp);
//crée l'ombre sous le menu
strtemp = '<DIV id="basongelet_' + nom + '" style="position: absolute; left: ' + (x_m+1) + 'px; top: ' + (y+haut-7)+ '; width:' + (larg_m-3) + 'px; height:7px;z-index: 5;display: none;" onmouseover="developper3(this);" onmouseout="reduire3(this);">';
strtemp += '<TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">';
// strtemp = '<TABLE border="0" cellpadding="0" cellspacing="0" style="position: absolute; left: ' + (x_m+1) + 'px; top: ' + (y+haut-7)+ '; border-collapse: collapse; z-index: 5;display: none" width="' + (larg_m-3) + 'px" id="basongelet_' + nom + '" height="7px" onmouseover="developper3(this);" onmouseout="reduire3(this);">';
strtemp += '<tr><td width="12" background="ombre_onguelet_haut_1'+extention+'">';
strtemp += '<span style="font-size: 2pt"> </span></td>';
strtemp += '<td background="ombre_onguelet_haut_2'+extention+'"><span style="font-size: 2pt"> </span></td>';
strtemp += '<td width="9" background="ombre_onguelet_haut_3'+extention+'">';
strtemp += '<span style="font-size: 2pt"> </span></td></tr></TABLE></DIV>';
document.write(strtemp);
}
else
if ((type_menu == 2)||(type_menu == 4))
{//si le menu à créer se déroule vers la gauche
//crée le menu
strtemp = '<DIV id="princ_' + nom + '" STYLE="position: absolute; left:' + x + '; top:' + y + '; width:' + larg + '; height:' + haut + '; z-index:4" onmouseover="developper2(this);" onmouseout="reduire2(this);">';
strtemp += '<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" id="tab_princ' + nom + '" width="100%" height="100%">';
strtemp += '<tr><td background="bord_gauche_1'+extention+'"><span style="font-size: 1"> </span></td>';
strtemp += '<td width="13" height="4" background="bord_gauche_2'+extention+'"><span style="font-size: 1"> </span></td></tr>';
strtemp += '<tr><td bgcolor="#8BBF2A" align="center" height="100%"><b>';
strtemp += '<font face="Arial" size="2" color="#961C29">';
if (url == "")
strtemp += nom;
else
strtemp += '<a href="' + url + '" target="main_win" style="text-decoration: none">' + nom + '</a>';
strtemp += '</font></b></td>';
strtemp += '<td width="13" background="bord_gauche_3'+extention+'"> </td></tr>';
strtemp += '<tr><td background="bord_gauche_5'+extention+'"><span style="font-size: 1"> </span></td>';
strtemp += '<td background="bord_gauche_4'+extention+'" width="13" height="4"><span style="font-size: 1"> </span></td></tr></table>';
strtemp += '<TR><TD></TD></TR></TABLE></DIV>'
document.write(strtemp);
//crée le menu déroulant
strtemp = '<DIV id="' + nom + '" STYLE="position: absolute; left: ' + x_m + 'px; top: ' + y_m + 'px; width:' + larg_m + '; height:' + (haut_m+5) + '; z-index:3" onmouseover="developper(this);" onmouseout="reduire(this);">';
strtemp += '<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" id="tab_' + nom + '" width="100%" height="100%">';
strtemp += '<tr><td background="onguelet_gauche_1'+extention+'"></td>';
strtemp += '<td background="onguelet_gauche_2'+extention+'" height="14" width="20"></td></tr>';
for (a=1 ; a<=menu.arguments.length-14 ; a=a+2)
{
strtemp += '<td bgcolor="#8BBF2A" align="right"><b><font face="Arial" size="2" color="#961C29">'
strtemp += '<a href="' + menu.arguments[13 + a + 1] + '" target="main_win" style="text-decoration: none">' + menu.arguments[13 + a] + '</a>';
strtemp += '</font></b></td><td background="onguelet_gauche_3'+extention+'"></td></tr>';
}
strtemp += '<td background="onguelet_gauche_5'+extention+'"><font size="1"> </font></td>';
strtemp += '<td background="onguelet_gauche_4'+extention+'" height="13"><font size="1"> </font></td></tr></table>';
strtemp += '<TR><TD></TD></TR></TABLE></DIV>'
document.write(strtemp);
//crée l'ombre sous le menu
strtemp = '<DIV id="basongelet_' + nom + '" style="position: absolute; left: ' + (x+larg-7) + 'px; top: ' + (y_m+1)+ '; width:7px; height:' + (haut_m+4) + 'px;z-index: 5;display: none;" onmouseover="developper3(this);" onmouseout="reduire3(this);">';
strtemp += '<TABLE border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%" height="100%">';
// strtemp = '<TABLE border="0" cellpadding="0" cellspacing="0" style="position: absolute; left: ' + (x+larg-7) + 'px; top: ' + (y_m+1)+ '; border-collapse: collapse; z-index: 5;display: none" width="7" id="basongelet_' + nom + '" height="' + (haut_m+4) + '" onmouseover="developper3(this);" onmouseout="reduire3(this);">';
strtemp += '<tr><td height="11" background="ombre_onguelet_gauche_1'+extention+'">';
strtemp += '<span style="font-size: 2pt"> </span></td></tr>';
strtemp += '<tr><td background="ombre_onguelet_gauche_2'+extention+'"><span style="font-size: 2pt"> </span></td></tr>';
strtemp += '<tr><td height="11" background="ombre_onguelet_gauche_3'+extention+'">';
strtemp += '<span style="font-size: 2pt"> </span></td></tr></TABLE></DIV>';
document.write(strtemp);
}
this.nom = nom;
this.largeur = larg;
this.hauteur = haut;
this.xpos = x;
this.ypos = y;
this.type_menu = type_menu;
this.largeur_menu = larg_m;
this.hauteur_menu = haut_m;
this.xpos_menu = x_m;
this.ypos_menu = y_m;
this.varx = varx;
this.vary = vary;
this.nbrvar = 0;
this.nbrvarmax = nbrvmax;
this.ouvrir = 0;
liste_menu.push(nom);
}
function show_props(obj,obj_name){
var result="";
for(var i in obj)
result+= obj_name+"."+i+" = "+
obj[i]+"\n";
return result;
}
</SCRIPT>
</head>
<body link="#961C29" vlink="#961C29" alink="#961C29">
<iframe frameborder="no" scrolling="no" name="main_win" src="" style="position: absolute; top: 60px; left: 105px;width: 90%; height: 90%; z-index: 0">
fenetre flottante<BR>sgfdsr<BR>greg<BR></iframe>
<SCRIPT LANGAGE="javascript">
/*Le menu est composé de rubriques comportant ou non un menu déroulant*/
/*
Créer une rubrique se fait en 2 lignes :
1: nomrubrique = new menu ("label de la rubrique", largeur, hauteur, ...);
2: t_menu["label de la rubrique"] = nomrubrique;
description des arguments passés pour créer un menu
- nom : nom de la rubrique(texte qui sera affiché à l' écran)
- larg, haut : largeur et hauteur du menu
- x, y : position du menu à l'écran
- type_menu : 1=rubrique dont le menu qui se déroule horizontalement, 2=pareil mais verticalement,
3=rubrique horizontale sans option, 4=pareil mais verticale.
- largm, hautm : dimentions du menu déroulant
- x,m, ym : position du menu déroulant lorsqu'il est enroulé
- varx, vary : variation en pixel du menu lorque celui-ci se déroule ou s'enroule (plus ces valeurs sont grandes et plus le menu se déroulera vite
- nbrvar : nombre d'étapes pour que le menu se déroule/s'enroule totalement
- urlmenu : indique quelle page charger lorsqu'on clique sur le lien (mettre une chaine vide si on ne veut pas que le menu soit un lien hypertexte
- optsmenu : marche par couple : le premier élément représente ce qui sera affiché à l'écran,
le deuxième est le lien qui sera appelé lorsqu'on clique sur l'option
- Remarque : les élements impairs de optsmenu correspondent au contenu des options et les éléments pair
correspondent aux éléments aux liens des options
*/
//arggument de l'objet menu : nom larg haut x y t_menu largm hautm xm ym varx vary nbrvar urlmenu <--------------------------- optsmenu ------------------------------------------------------------------------------------------------------------------>
menu1 = new menu("Menu 1" , 110, 49 , 112, 0, 1 , 110, 90 , 112, -40 , 0 , 12, 7 , "" , "option 1", "page essai 1.htm", "option 2", "page essai 2.htm", "option 3", "page essai 3.htm", "option 4", "page essai 4.htm");
t_menu["Menu 1"] = menu1;
menu2 = new menu("deuxième menu" , 180, 49 , 222, 0, 1 , 180, 125 , 222, -76 , 0 , 12, 8 , "page essai 4.htm" , "première option", "page essai 5.htm", "deuxième option", "page essai 1.htm", "oprtion 3", "page essai 2.htm", "option 4", "page essai 3.htm", "option 5", "page essai 5.htm");
t_menu["deuxième menu"] = menu2;
menu3 = new menu("troisième menu" , 110, 49 , 402, 0, 1 , 110, 105 , 402, -56 , 0 , 12, 7 , "" , "option 3-1", "page essai 1.htm", "option 3-2", "page essai 2.htm", "option 3-3", "page essai 3.htm", "option 3-4", "page essai 4.htm");
t_menu["troisième menu"] = menu3;
menu4 = new menu("menu sans option" , 110, 49 , 512, 0, 3 , 110, 10 , 512, -150, 0 , 12, 8 , "page essai 4.htm");
t_menu["menu sans option"] = menu4;
menu5 = new menu("menu sans option 2" , 110, 49 , 622, 0, 3 , 110, 10 , 622, -150, 0 , 12, 8 , "page essai 3.htm");
t_menu["menu sans option 2"] = menu4;
menu4 = new menu("Premier menu vertical" , 99, 80 , 0 , 65, 2 , 100, 70 , 0 , 65 , 14 , 0, 7 , "page essai 1.htm" , "option ?", "page essai 3.htm", "option ??", "page essai 2.htm", "option ???", "page essai 4.htm");
t_menu["Premier menu vertical"] = menu4;
menu5 = new menu("Rubrique sans option" , 99, 60 , 0 ,145, 4 , 10 , 10 , -50, 135, 14 , 0, 7 , "page essai 3.htm");
t_menu["Rubrique sans option"] = menu5;
menu6 = new menu("deuxième menu vertical avec options", 99, 110, 0 ,205, 2 , 100, 90 , 0 , 205, 14 , 0, 7 , "" , "option :-)", "page essai 5.htm", "option :-(", "page essai 2.htm", "option ;-)", "page essai 3.htm");
t_menu["deuxième menu vertical avec options"] = menu6;
var clkmenu1= setInterval('affmenu();', 10);
</SCRIPT>
<!--
--------------Les images et les tableaux qui suivent ne servent qu'à la finission du menu : se sont---------
-------------- les images qui sont en haut à gauche, l'arrondi à la fin du menu horizontal ---------
-------------- et l'arrondi à la fin du menu vertical ---------
-->
<!-- ---- Image du coin supérieur gauche ----
-->
<img border="0" style="position: absolute; left: 0px; top: 0px; z-index: 4" src="bord_haut_gauche.bmp" width="112" height="65">
<!-- ---- Image située à la fin du menu horizontal ----
-->
<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; left: 732px; top: 0px; border-collapse: collapse; z-index: 4" bordercolor="#111111" width=26 height=49>
<tr>
<td background="bord_haut_fin_1.bmp"> </td>
</tr>
<tr>
<td height=23 background="bord_haut_fin_2.bmp"> </td>
</tr>
</table>
<!-- ---- Image située à la fin du menu vertical ----
-->
<table border="0" cellpadding="0" cellspacing="0" style="position: absolute; left: 0px; top: 315px; border-collapse: collapse; z-index: 4" bordercolor="#111111" width=99 height=27>
<tr>
<td background="bord_gauche_fin_1.bmp"> </td>
<td width=23 background="bord_gauche_fin_2.bmp"> </td>
</tr>
</table>
</body>
</html>Conclusion :
Vous pouvez essayer de custumiser vôtre menu (j'ai par exemple enlevé le soulignage des lien hypertexte mais vous pouvez les remettre en supprimant tous les style="text-decoration: none").---------------------------------------------
Mise à jour du 24 Avril 2004 : compatibilité avec les navigateur et extention des nom des images.
- le script marche maintenant trés bien sous netscape 7.0 (pas du tout sur le 4.7), mozilla 6.0, et bien sûr sur internet explorer (version 6). Sous opera 7 il marche aussi sauf qu'il y a un petit problème avec la hateur de certaines cellules de tableaux ainsi qu'avec la iframe : elle se place toujous en premier plan (le z-index est apparement mal géré par opera). Mais bon, il suffit d'afficher le contenu des page directement sur la page (en pensant bien à décaler tous le contenu pour qu'il ne soit pas caché par le menu) et le tour est joué.
- j'ai rajouté une variable en début de fichier (la variable extention) qui permet de changer trés facilement l'extention des images utilisées. Avant si on voulait convertir les images de bmp en gif il fallait changer toues les extentions dans le fichier. Maintenant il suffit de changer la valeur de cette variable (de ".bmp" en ".gif" dans l'exmple précédent).
J'ai été surpris par la facilité avec laquelle j'ai pu mettre à jour le script notement en ce qui concerne la compatibilité avec les navigateurs (je pensais que ça allait me prendre beaucoup plus de temps; cela ne mais pris qu'une grosse heure).
!!!!!!
Je n'ai apparement pas pu uploader le nouveau zip et la nouvelle capture d'écran. Si vous voulez utiliser la nouvelle version du script, télécharger le zip, décompressez-le et remplacez le contenu du fichier menu exemple.htm par le code contenu dans le cadre ci-dessus, ça devrai marcher.
!!!!!!
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.