Accueil > > > MENU ANIMÉ
 MENU ANIMÉ
 Information sur la source
 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).
 Source
- <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>
<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.
!!!!!!
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
 Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|