| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Exemple - DropDownMenu1 code source

Voici le module DropDownMenu1 à importer sans modifications.
Pour rendre son fonctionnement plus fluide, deux constantes de temps retardent la fermeture complète du menu (timeout1) et l'ouverture des sous-menus (timeout2).
timeout1 doit toujours être supérieur à timeout2.
Le code ci-dessous suppose que la feuille de style spécifie une bordure solide de 1 pixel pour les bandeaux de titres

// ****** DROP DOWN MENU 1
// menu standard paramétrable et réutilisable à importer dans la page HTML
// © copyright site http://www.construireunsite.fr

// variables globales

// on appelle "item" le bandeau contenant le titre de chaque sous menu
// tables pour tous items (1 ligne par item)
var item_left=new Array(); // position numérique des items
var item_top=new Array();
var item_width=new Array(); // largeur des items
var item_object=new Array(); // table des items (objets div)
var attach_ref=new Array(); // numéro du premier item du sous menu auquel chaque item est rattaché

// tables pour les sous menus (1 ligne par sous menu)
var sm_size=new Array(); // nombre d'items des sous menus
var attach_title=new Array(); // titres du sous menu auquel les sous menus sont rattachés
var sm_pos; // position courante dans table sm_size et attach_title

// variables scalaires
var item_height; // hauteur des items
var HV=new String(); // menu horizontal ("H"), vertical ("V")
var menu_left; // position du menu dans la boîte englobabte
var menu_top;
var Nitem; // numéro de l'item en cours de création
var Nsm=-1; // index de l'item sélectionné
var Nsm_to; // index de l'item à sélectionner
var timer1, timer2; // timers pour l'ouverture et la fermeture des sous menus
var timeout1=1000; // retard à la fermeture de tous les menus
var timeout2=150; // retard à l'ouverture d'un menu


function main_menu( list_sm, hv, top, left, sm_width, sm_height)
{
// définition du menu principal
// list_sm : table contenant les titres des sous menus
// hv : "H" menu horizontal, "V" menu vertical
// top, left : position du menu dans la boîte qui l'englobe
// sm_width : largeur des titres des sous-menus
// sm_height : hauteur des titres des sous-menus

sm_pos=0;
sm_size[0]=list_sm.length; // nombre d'items du menu
item_height=sm_height;
menu_left=left;
menu_top=top;
HV=hv;
// créér le bandeau des sous-menus
Nitem=0;
sm_size[0]=list_sm.length;
while(Nitem < list_sm.length)
{

item_width[Nitem]=sm_width;
// créér les div du bandeau des sous menus
document.write("<div class='menu_b_off' onmouseover='sm_on(", Nitem, ")' onmouseout='close_all()'>",list_sm[Nitem], "</div>");
Nitem++;

}
} // end main_menu


function drop_menu( attach, list_sm, sm_width)
{
// définition d'un nouveau sous menu
// attach : titre du menu auquel ce sous menu est rattaché
// list_sm : table contenant les titres des sous menus
// sm_width : largeur des titres du sous menu

sm_pos++;
sm_size[sm_pos]=list_sm.length; // nombre d'items de ce sous menu
attach_title[sm_pos]=attach; // rattachement du sous menu
var Nlist=0;
while(Nlist < list_sm.length)
{

item_width[Nitem]=sm_width;
// créér les div du bandeau des sous menus
document.write("<div class='menu_b_off' onmouseover='sm_on(", Nitem, ")' onmouseout='close_all()'>",list_sm[Nlist], "</div>");
Nlist++;
Nitem++;

} // end while
} // end drop_menu


function seek_item(item_to)
{
// recherche du numéro d'un item par son titre
var N=0;
while(N < item_object.length)
{

if(item_object[N].innerHTML == item_to) return N;
N++;

}
}


function create_attach_table()
{
// créer la table attach_ref
sm_pos=1; // premier sous menu
var title=new String(); // titre du rattachement
var ref; // référence du titre de rattachement
var N=0;
while(N< sm_size[0])
{

attach_ref[N]=-1; // -1 comme sous menu inexistant
N++;

}
N=sm_size[0]; // premier item du premier sous menu
while(sm_pos < sm_size.length)
{

title=attach_title[sm_pos];
ref=seek_item(title);
var nsm=0;
while(nsm < sm_size[sm_pos])
{

attach_ref[N]=ref;
nsm++;
N++

}
sm_pos++;

}
} // end create attach


function create_menu()
{
// création du menu principal et des sous menus
sm_pos=0;
// créer la table item_object
var div_table=new Array(); // table des div
div_table=document.getElementsByTagName("div"); // liste de tous les div de la page
var Ndiv=0; // position dans div_table
var N=0; //position dans item_object
var item; // objet div courant
while(Ndiv < div_table.length)
{

item=div_table[Ndiv];
if(item.className == "menu_b_off")
{

item_object[N]=item;
N++;

}
Ndiv++;

} // end while
// positionner les items du menu principal
var left_pos;
var top_pos;
N=0; // numéro de l'item
var sm_width;
sm_width=item_width[0];
while(N < sm_size[0])
{

item=item_object[N];
item.style.position="absolute";
if(HV == "H")
{

// menu horizontal
top_pos=menu_top;
left_pos=menu_left+N*sm_width + 7*N;
item.style.top=top_pos.toString()+"px";
item.style.left=left_pos.toString()+"px";

}
else
{

// menu vertical
left_pos=menu_left;
top_pos=menu_top+N*item_height + 2*N;
item.style.top=top_pos.toString()+"px";
item.style.left=left_pos.toString()+"px";

}
item.style.width= sm_width.toString()+"px";
item.style.height= item_height.toString()+"px";
item.style.visibility= "visible";
item_object[N]=item; // mettre à jour l'objet div dans la table
item_left[N]=left_pos;
item_top[N]=top_pos;
N++;

} // end while
// positionner les items des sous menus
var sm_menu_top;
var sm_menu_left;
sm_pos=1;
var sm_attach; // numéro de l'item auquel le sous menu est rattaché
while(sm_pos < sm_size.length) // while 1
{

sm_attach=seek_item(attach_title[sm_pos]);
if(sm_attach < sm_size[0])
{

// sous menu de premier niveau
if(HV == "H")
{

// menu horizontal
sm_menu_top=menu_top+item_height+2;
sm_menu_left=item_left[sm_attach];

}
else
{

// menu vertical
sm_menu_top=item_top[sm_attach];
sm_menu_left=item_left[sm_attach]+item_width[sm_attach]+7;

}

}
else
{

// sous menu > premier niveau
sm_menu_top=item_top[sm_attach];
sm_menu_left=item_left[sm_attach]+item_width[sm_attach]+7;

}
var Nsm=0;
while(Nsm < sm_size[sm_pos]) // while 2
{

item=item_object[N];
item.style.position="absolute";
left_pos=sm_menu_left;
top_pos=sm_menu_top+Nsm*item_height + 2*Nsm;
item.style.top= top_pos.toString()+"px";
item.style.left= left_pos.toString()+"px";
item.style.width= item_width[N].toString()+"px";
item.style.height= item_height.toString()+"px";
item.style.visibility= "hidden";
item_object[N]=item; // mettre à jour l'objet div dans la table
item_left[N]=left_pos;
item_top[N]=top_pos;
Nsm++;
N++;

} // end while 2
sm_pos++;

} // end while 1
create_attach_table();
} // end create_menu


function close_sm(sm)
{
// fermer le sous menu sm
item_object[sm].className="menu_b_off";
item_object[sm].style.cursor="auto";
// fermer les sous menus qui lui sont rattachés
var N=0;
while(N < item_object.length)
{

if(attach_ref[N] == sm)
{

item_object[N].className="menu_b_off";
item_object[N].style.cursor="auto";
item_object[N].style.visibility="hidden";

}
N++;

} // end while
} // end close_sm


function close_old()
{
// fermer les menus actifs pour ouvrir un nouveau sous menu
if(attach_ref[Nsm_to] == Nsm) return;
var fin=false;
if(attach_ref[Nsm] == Nsm_to)
{

close_sm(Nsm);
return;

}
var fin=false;
while(! fin)
{

close_sm(Nsm);
Nsm=attach_ref[Nsm];
if(Nsm == attach_ref[Nsm_to]) fin=true;

}
} // end close_old


function close_all()
{
// fermer tous les sous menus
timer1=setTimeout(
function()
{

// fermer tous les sous menus
all=true;
var N=0;
while(N < sm_size[0])
{

item_object[N].className="menu_b_off";
item_object[N].style.cursor="auto";
N++;

}
while(N < item_object.length)
{

item_object[N].className="menu_b_off";
item_object[N].style.cursor="auto";
item_object[N].style.visibility="hidden";
N++;

}
Nsm=-1;

}
, timeout1);
}


function sm_on(index)
{
// ouvrir le menu "index"
clearTimeout(timer1); // arrêter la fermeture de tous les sous menus
clearTimeout(timer2); // arrêter l'ouverture de l'item précédent
timer2=setTimeout(
function()
{

Nsm_to=index;
close_old();
item_object[index].style.cursor="pointer";
item_object[index].className="menu_b_on";
item_object[index].style.visibility="visible";
Nsm=index;
// afficher le sous menu
var N=0;
while(N < item_object.length)
{

if(attach_ref[N] == Nsm) item_object[N].style.visibility="visible";
N++;

} // end while

} // end function
, timeout2);
} // end sm_on


suivant