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
MENU VERTICALE GAUCHE ET DROIT DEROULANTMENU VERTICALE GAUCHE ET DROIT DEROULANTc'est repris d'une de mes source (menu glissant) sauf que au lieu de deplacer un element dans le document c'est un div en overflow hidden qui s'agrand...
par kazma
MENU VERTICALE EN TRANSPARENCEMENU VERTICALE EN TRANSPARENCECe menu est complètement modifiable, les fenêtres de sous menus étant composées de plusieur images, vous pouvez modifier la taille des sous menus en...
par dlvains
MENU DÉROULANT EN IMAGESMENU DÉROULANT EN IMAGES un menu simple a modifier, il vous suffit de changer le texte sur le PSD et d'enregistrer au format PNG.
si vous modifiez la largeur des images, pe...
par dlvains
TBFRAME: TAB BROWSING FRAMETBFRAME: TAB BROWSING FRAME
Cela fait un moment que j'avais eu l'idée de mettre en ligne ce script, mais je n'avais jamais eu le temps de mettre un coup de propre dans le code ai...
par triumphs
MENU PRINCIPALMENU PRINCIPALBonjour, dans ce petit source, j'ai met une belle menu avec php,javascript, css, pour me contactet , ABOUSSEBABA ALI <contact@aliwebmaster.com>, à vou...
par ali1987
 Commentaires et avis
|
Derniers Blogs
 [MIX 2010] - TELECHARGEZ INTERNET EXPLORER 9 EN PREVIEW ![MIX 2010] - TELECHARGEZ INTERNET EXPLORER 9 EN PREVIEW ! par redo
La Preview de Windows Explorer 9 est maintenant disponible à l'adresse suivante : http://ie.microsoft.com/testdrive/ Cette version ne nécessite pas un redémarrage de votre machine pour être exploitée . Cette version est fonctionnelle mais reste cependant ...
Cliquez pour lire la suite de l'article par redo [MIX 2010] - KEYNOTE DAY 2 ONLINE : WINDOWS INTERNET EXPLORER 9, JQUERY, ODATA ET DALLAS CTP2 ![MIX 2010] - KEYNOTE DAY 2 ONLINE : WINDOWS INTERNET EXPLORER 9, JQUERY, ODATA ET DALLAS CTP2 ! par redo
Dans la lignée du premier keynote, retrouvez la vidéo du second keynote en ligne : Visionnez la vidéo à l'url suivante : http://www.microsoft.com/presspass/events/mix/VideoGallery.aspx Vous y retrouverez ainsi les speakers Scott Guthrie, Dean Hachamovitch...
Cliquez pour lire la suite de l'article par redo [MIX 2010] - RETOUR D'EXPéRIENCE DéVELOPPEMENT SEESMIC SUR WINDOWS PHONE 7[MIX 2010] - RETOUR D'EXPéRIENCE DéVELOPPEMENT SEESMIC SUR WINDOWS PHONE 7 par redo
En avant première, Loic le retour d'expérience de Loïc Le Meur du portage de l'application http://seesmic.com/ sur plateforme Windows Phone 7 . c'était d'ailleurs une des rares opportunités de tester, voir toucher le nouveau device . voyez par vous-même :...
Cliquez pour lire la suite de l'article par redo [MIX 2010] - LE KEYNOTE DAY 1 DISPONIBLE ONLINE ![MIX 2010] - LE KEYNOTE DAY 1 DISPONIBLE ONLINE ! par redo
Si tout comme moi, vous avez manqué de peu le premier keynote du Microsoft Mix 2010, je vous invite à prendre deux heure et le consulter ci-dessous . Visionnez le Keynote à l'url suivante : http://www.microsoft.com/Presspass/events/mix/videoGallery.aspx?c...
Cliquez pour lire la suite de l'article par redo VISUAL STUDIO TALK SHOW: EF4VISUAL STUDIO TALK SHOW: EF4 par Matthieu MEZIL
La semaine dernière, j'étais à Montréal pour y animer des conférences sur Entity Framework. J'en ai profité pour enregister un podcast Visual Studio Talk Show que vous pouvez retrouver ici ....(read more) ...
Cliquez pour lire la suite de l'article par Matthieu MEZIL
Logiciels
 Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor
|