HTML> barre

Les Services Gratuits

Routine javascript

menus vertical déroulant avec des sous rubriques
Description Ce menu à la particularité de se dérouler verticalement et donc de s'adapter éventuellement aux frames. Il fonctionne sous Internet Explorer et Netscape Navigator. La configuration peut s'avérer difficile. .

A mettre dans la partie HEAD et /HEAD

<SCRIPT LANGUAGE="JavaScript">    /**************************************** Menu dynamique vertical Daniel Fabien 21-05-2002 http://www.script-masters.com Prière de conserver ce message /  var largeur = 120; //Largeur du menu var gauche = 50; //nombre de pixe de la gauche de l'écran var top = 50; //Nombre de pixels du haut de la page var couleur_police_cat="#FFFFFF"; //Couleur du texte des categories var couleur_police_scat="#000000"; //Couleur du texte des sous-categories var couleur_cat="#959EAD"; //Couleur de fond des categories var couleur_scat="#C3C9D4"; //Couleur de fond des sous-categories /**************** Attention : la modification des 2 variables ci-dessous peut provoquer d'important bug d'affichages Il est fortement conseillé de les conserver en état. *********************************************************/ var taille = 11;//Police de caractères var police = "Arial"; //Type de police  var nb_elem = 4;//Nombre de categorie dans le menu var nb_souscat = new Array(nb_elem); //Nb_souscat contient le nombre de sous categorie pour chaque categorie nb_souscat[0] = 3; //Nombre de sous categorie 1 nb_souscat[1] = 3; //Nombre de sous categorie 2 nb_souscat[2] = 2; //Nombre de sous categorie 3 nb_souscat[3] = 3; //Nombre de sous categorie 4 //répeter aussi souvent qu'il y a de categorie... var categorie = new Array(nb_elem); var soustab = new Array; var tab0 = new Array(nb_souscat[0]); var tab1 = new Array(nb_souscat[1]); var tab2 = new Array(nb_souscat[2]); var tab3 = new Array(nb_souscat[3]); //répeter aussi souvent qu'il y a de categorie...  categorie[0] = " Javascript"; //Titre de la categorie tab0[0] = " Script|http://www.script-masters.com|_blank"; //Premier sous-titre|liens|cible tab0[1] = " Tutoriaux|http://www.script-masters.com|_blank"; //Second sous-titre|liens|cible tab0[2] = " Liens|http://www.script-masters.com|_blank"; //Troisième sous-titre|liens|cible  categorie[1] = " Php"; //Titre de la categorie tab1[0] = " Liens|http://www.script-masters.com|_blank"; //Premier sous-titre|liens|cible tab1[1] = " Forums|http://www.script-masters.com|_blank"; //Second sous-titre|liens|cible tab1[2] = " Livres|http://www.script-masters.com|_blank"; //Troisième sous-titre|liens|cible  categorie[2] = " MySql"; //Titre de la categorie tab2[0] = " Bases|http://www.script-masters.com|_blank"; //Premier sous-titre|liens|cible tab2[1] = " Livres|http://www.script-masters.com|_blank"; //Second sous-titre|liens|cible  categorie[3] = " Forum"; //Titre de la categorie tab3[0] = " Javascript|http://www.script-masters.com|_blank"; //Premier sous-titre|liens|cible tab3[1] = " Php/MySQL|http://www.script-masters.com|_blank"; //Second sous-titre|liens|cible tab3[2] = " Webmasters|http://www.script-masters.com|_blank"; //Troisième sous-titre|liens|cible soustab[0] = tab0; soustab[1] = tab1; soustab[2] = tab2; soustab[3] = tab3; //répeter aussi souvent qu'il y a de categorie...   var conf = -1; function Init(){ var hauteur = top; for(i=1;i<=nb_elem;i++){ document.getElementById("menu"+i+"").style.top = hauteur; hauteur = hauteur + 17; } } function voir(z){ if(conf==z){ document.getElementById("sousmenu"+z+"").style.visibility = 'hidden'; Init(); conf=conf+nb_elem; }else{ conf=z; //Calcul de la hauteur dont doit se baisser le menu haut=0; var haut = 15nb_souscat[z-1]+z18+top; //On retracte tous les éléments for(i=1;i<=nb_elem;i++){ document.getElementById("sousmenu"+i+"").style.visibility = 'hidden'; } //on les remets tous à leur place Init(); //on cale le sous menu sous la categorie document.getElementById("sousmenu"+z+"").style.top = 16; dec = haut; //On peut alors baisser tous les autre menus for(i=z+1;i<=nb_elem;i++){ document.getElementById("menu"+i+"").style.top = dec; dec=dec+18; } //Enfin, on rend le menu visible document.getElementById("sousmenu"+z+"").style.height = 15nb_souscat[z-1]; document.getElementById("sousmenu"+z+"").style.visibility = 'visible'; } } function affiche(){ //feuille de style document.write('<style>'); document.write(' div.menu {visibility:visible; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_cat+'}'); document.write(' div.sousmenu {position:absolute; left:-1; height:20; visibility:hidden; width:'+ largeur +'; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_scat+'}'); document.write(' a.menu {font-family: '+ police +'; color: '+couleur_police_cat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}'); document.write(' a.smenu {font-family: '+ police +'; color: '+couleur_police_scat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}'); document.write('</style>'); document.write('<div>'); for(i=0;i<nb_elem;i++){ boucle = nb_souscat[i]; document.write('<div id="menu'+(i+1)+'" style="position:absolute; left:'+ gauche +'px; width:'+ largeur +'px;" class="menu">'); document.write('<a href="#" class="menu" onClick="javascript:voir('+(i+1)+')">'+categorie[i]+'</a>'); document.write('<div width="'+ largeur +'" id="sousmenu'+(i+1)+'" class="sousmenu">'); for(z=0;z<boucle;z++){ elem=soustab[i][z].split("|"); document.write('<div height="15"><a href="'+elem[1]+'" target="'+elem[2]+'" class="smenu">'+elem[0]+'</a></div>'); } document.write('</div>'); document.write('</div>'); } document.write('</div>'); document.onLoad=Init(); } </script>

menus vertical avec des sous rubriques*

A mettre dans la partie BODY

<script language="Javascript"> affiche(); </script>

Retour