Archives

Les menus dynamiques en JavaScript font partie des fonctionnalités intérêssantes à installer sur un site, sauf pour ceux qui n'ont pas la chance d'avoir un éditeur WYSIWYG pour le générer de toutes pièces [ ou qui, comme moi, préfèrent travailler entièrement dans le code source pour en maitriser chaque rouage ] car la structure n'est pas toujours évidente à comprendre...
Voici donc la retranscription de la source des menus dynamiques .JS utilisés dans une ancienne interface de ce site, et commentés.

Attention, ce code, même s'il est assez universel [ normalement pris en charge par les versions 4 + d'Internet Explorer et Netscape Navigator sur PC ET par le grand et merveilleusement universel Mozilla, malgré un léger décalage... ] pose encore quelques soucis au Mac, n'as pas été testé par mes soins avec Opéra [ ni sur PC, ni sous Linux ] ni avec les Navigateurs du monde Linux, ni avec Safari sous OS X Jaguar...
de plus, certains sites de WebDesign semblent recommander de ne plus se servir de ce genre de menus à cause des trop grands problèmes avec les navigateurs alternatifs... À vous de voir donc...

Aperçu des >> Menus Dynamiques avec le code source à copier-coller.
Code Source à >> Télécharger [ menu_dynamique.JS : 4,91 Ko ].

•1 le premier fichier doit être un .js, du genre « menu_dynamique.js », et contenir le code ci-après (les paragraphes grisés sont des commentaires) :

// Le menu dynamique se présente sous la forme d'un tableau (balise Html <TABLE ...>) de 400 pixels de large sur 20 px de haut, avec l'attribut cellspacing à 1.
// Dans cet exemple, nous avons 4 sections, qui apparaitront chacune dans une colonne de 100 pixels.
// Chacun des sous-menus est aussi un <TABLE ...> de 150 px, et dont le nombre de ligne dépends du nombre d'éléments que l'on veut y voir affiché.
// la Variable posYmenu définie à quelle hauteur se situent les sous-menus. Ici, à 20 px de haut + 2 px à cause du cellspacing.

posYmenu = 22;

// Ici, on gère les couleurs des cellules de tableau, en effet, il y a un effet RollOver au passage de la souris ;-)
// bgcolor contient la couleur normale [ quand la souris n'est pas sur la cellule ] et bgcolor2 la couleur alternative [ lorsqu'on survole la cellule ]

bgcolor = '#354785';
bgcolor2 = '#5a6ba5';

// la variable needcenter accepte les valeurs TRUE ou FALSE ; elle sert à définir si on aligne ou pas le menu principal au milieu de la page ou d'un autre élément.

needcenter = true;
IF(!needcenter)

// Si c'est FALSE, on considère que le premier sous-menu se cale tout à gauche.

posXmenu = 0;
ELSE
{

// si c'est TRUE, on calcule la position de gauche en fonction de la position du menu principal : dans le document lui-même :

IF (document.all)
posXmenu = (document.body.clientWidth/2)-(400/2);
ELSE

// ... ou dans un autre élément au sein du document, à l'aide de innerWidth [ largeur de l'élément courant ].
// dans les deux cas, la valeur de 400 correspond à la largeur du tableau du menu principal.

posXmenu = (window.innerWidth/2)-(400/2);
}

// Feuille de style des menus, vous pouvez en changer les attributs [ couleur, fontes, décorations, etc... ] mais pas les éléments spécifiques !

document.write('<style type="text/css">');
document.write(' .popper { POSITION: absolute; VISIBILITY: hidden; z-index: 3; }')
document.write(' #topgauche { position: relative; z-index: 10; }')
document.write(' A.menu:hover { color: #ffffff; text-decoration: none; }')
document.write(' A.menu { color: #ffffff; text-decoration: none; }')
document.write('</style>')
document.write('<DIV class=popper id=topdeck></DIV>');

// on définie un nouveau Tableau, cette fois dans le sens programmation du terme !! et que l'on appelle t_liens

t_liens = new Array;

// pour chacun des éléments du premier tableau, on définie un second tableau de type 'programmation', qui vient s'imbriquer dans celui déjà existant.

t_liens[0] = new Array;

// dans le tableau imbriqué, on définie le contenu.
// Le premier numéro entre crochets correspond à la première dimension du tableau t_liens, et les deuxièmes valeurs entre crochets correspondent à chacun des sous-éléments.

// la deuxième paire de crochets doit obligatoirement commencer à zéro, parce qu'en programmation, c'est comme ça ! ;-)
// la chaîne de caractères doit contenir le lien qui servira à définir la destination du lien A HREF, ainsi que son libellé.

t_liens[0][0] = '<A HREF="section0/page0.htm" class=menu>Section 0 / Grand A</A>';

// ATTENTION, si vous devez mettre une apostrophe dans le libellé d'un lien à cet endroit, vous devez bien penser à mettre un \ devant, car ce sont déjà des apostrophes qui servent à encadrer le texte...

t_liens[0][1] = '<A HREF="section0/page0.htm" class=menu>Section 0 / P\'tit B</A>';

t_liens[1] = new Array;
t_liens[1][0] = '<A HREF="section1/page0.htm" class=menu>Section 1 / Page C</A>';
t_liens[1][1] = '<A HREF="section1/page1.htm" class=menu>Section 1 / Page D</A>';
t_liens[1][2] = '<A HREF="section1/page2.htm" class=menu>Section 1 / Page E</A>';

t_liens[2] = new Array;
t_liens[2][0] = '<A HREF="section2/page0.htm" class=menu>Section 2 / Page F</A>';
t_liens[2][1] = '<A HREF="section2/page1.htm" class=menu>Section 2 / Page G</A>';
t_liens[2][2] = '<A HREF="section2/page2.htm" class=menu>Section 2 / Page H</A>';

t_liens[3] = new Array;
t_liens[3][0] = '<A HREF="section3/page0.htm" class=menu>Section 3 / Page I</A>';
t_liens[3][1] = '<A HREF="section3/page1.htm" class=menu>Section 3 / Page J</A>';
t_liens[3][2] = '<A HREF="section3/page2.htm" class=menu>Section 3 / Page K</A>';
t_liens[3][3] = '<A HREF="section3/page3.htm" class=menu>Section 3 / Page L</A>';
t_liens[3][4] = '<A HREF="section3/page4.htm" class=menu>Section 3 / Page M</A>';
t_liens[3][5] = '<A HREF="section3/page5.htm" class=menu>Section 3 / Page N</A>';

// ne me demandez pas de vous expliquer à quoi sert cette portion de code, elle y est, et je l'y laisse ;-))

var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
IF (nava)
{
skn = document.topdeck
}
ELSE IF (dom)
{
skn = document.getElementById("topdeck").style
}
ELSE IF (iex)
{
skn = topdeck.style
}

// si jamais vous voulez définir un léger espacement entre le menu et les sous-menus, c'est ici ou null part ailleur !

skn.top = posYmenu+1;

// la fonction pop sert à écrire les différents tableaux <TABLE ...> correspondant aux différents sous-menus.
// les paramètres d'entrée sont msg, qui correspond à une des dimensions [ numéro de la première paire de crochets ] de la variable t_liens, et pos, qui est le décalagevers la droite à apporter au sous-menu pour qu'il soit toujours juste en dessous du menu.

function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.left = posXmenu+pos;

// le code Html pour définir le tableau qui contient le sous-menu

var content ='<TABLE border=0 cellspacing=1 cellpadding=0 bgcolor="#000000" width=150>';
pass = 0
while (pass < msg.length)
{

// pour tous les éléments se trouvant dans la deuxième paire de crochets de la variable t_liens, on écrit une nouvelle ligne <TR>...</TR>, avec le lien saisi plus haut...

content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" align='left' valign='middle'> "+msg[pass]+"</TD></TR>";
pass++;
}
content += "</TABLE>";
IF (nava)
{
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
ELSE IF (dom)
{
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
ELSE IF (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}

// fonction pour masquer les sous-menus...

function kill()
{
skn.visibility = "hidden";
}

// ... que l'on appelle dès que l'on clique quelque part dans le document en dehors des sous-menus.

document.onclick = kill;
document.write('<DIV ID=topgauche>')

// le tableau tel que présenté tout à l'heure, 400 px de large, etc...

document.write('<TABLE summary="" border=0 cellspacing=1 cellpadding=0 width=400 align="center" bgcolor="#000000">')

// il n'est pas obligatoire de définir une hauteur de ligne, mais c'est conseillé pour pouvoir facilement renseigner la variable posYmenu ci-dessus.

document.write(' <TR height=20>')

// la partie la plus délicate à mon avis : voici donc chacune des 4 colonnes du menu. On défini pour chaque cellule sa couleur de fond avec la variable bgcolor. On défini aussi les événements OnMouseOver et OnMouseOut pour le RollOver dans la balise <TD ...>.
// pour l'événement OnMouseOver, on appelle la fonction pop, en passant comme premier paramètre la variable t_liens, avec la dimension correspondant au sous-menu à afficher. Le deuxième paramètre est le décalage vers la droite à apporter. Pour la première cellule, il est égal à 0, pour les suivantes, il faut ajouter la largeur de la(des) cellule(s) précédente(s).

document.write(' <TD width=100 align="center" valign="middle" bgcolor='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(t_liens[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'">')

// on met aussi, et c'est bien évident, un lien vers la page par défaut de chacune des sections, avec aussi l'événement OnMouseOver pour faire surgir le sous-menu.

document.write('<a onMouseOver="pop(t_liens[0],0)" href="section0/index.html" class="menu" title="Section 0">Section 0</a><br>')
document.write(' </TD>')

document.write(' <TD width=100 align="center" valign="middle" bgcolor='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(t_liens[1],100)" onMouseOut="this.style.background=\''+bgcolor+'\'">')
document.write('<a onMouseOver="pop(t_liens[1],100)" href="section1/index.html" class="menu" title="Section 1">Section 1</a><br>')
document.write(' </TD>')

document.write(' <TD width=100 align="center" valign="middle" bgcolor='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(t_liens[2],200)" onMouseOut="this.style.background=\''+bgcolor+'\'">')
document.write('<a onMouseOver="pop(t_liens[2],200)" href="section2/index.html" class="menu" title="Section 2">Section 2</a><br>')
document.write(' </TD>')

document.write(' <TD width=100 align="center" valign="middle" bgcolor='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(t_liens[3],300)" onMouseOut="this.style.background=\''+bgcolor+'\'">')
document.write('<a onMouseOver="pop(t_liens[3],300)" href="section3/index.html" class="menu" title="Section 3">Section 3</a><br>')
document.write(' </TD>')

document.write(' </TR>')
document.write('</TABLE></DIV>')

// il faut bien penser à fermer le document...

document.close()

•2 ensuite, dans toutes les pages faisant appel à votre menu dynamique, vous devez mettre cet appel à script à l'endroit précis où doit apparaitre le menu :

<script language="JavaScript" type="text/javascript" src="menu_dynamique.js"></script>


Aperçu des >> Menus Dynamiques avec le code source à copier-coller.
Code Source à >> Télécharger [ menu_dynamique.JS : 4,91 Ko ].