Gloubi tuto – menu interactif déroulant

Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

Fonctionnement

Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

<table>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
    <tr>
        <td>Rubrique</td>
    </tr>
    <tr>
        <td>Liens....</td>
    </tr>
</table>

Les différentes entrées (rubriques principales) du menu sont renseignées dans un array ‘mv_menu’, et les liens correspondant à chacune de ces rubriques sont renseignés dans un autre array, ‘mv_lien’.

Dans ce deuxième array, les index des entrées doivent correspondre avec les index du premier tableau, et les liens sont formés par concaténation de balises <a>.

mv_menu = new Array();
mv_lien = new Array();

mv_menu[0] = 'RUBRIQUES';
mv_menu[1] = 'TEST';


mv_lien[0] = ''
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . fonds</A><BR>';
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . textures</A><BR>';
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . papiers</A><BR>';
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . gifs</A><BR>';
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . annuaire </A><BR>';
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . guestbook</A><BR>';
mv_lien[0] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . jascripts</A><BR>';


mv_lien[1] = '';
mv_lien[1] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . GA</A<BR<br/>';
mv_lien[1] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . BU</A<BR<br/>';
mv_lien[1] += '<A HREF="http://www.monsite" target="_blank" CLASS=mvstyle> . ZO</A<BR<br/>';

Une variable mv_pos permet d’indiquer l’entrée du menu dont on doit afficher les liens.

La fonction principale (mv_menu_draw) fonctionne comme suit.

On boucle sur le tableau des entrées principales (‘mv_menu’). Pour chacune des entrées de ce tableau, selon qu’elle soit sélectionnée (au survol de la souris) ou pas, on affiche le texte avec un style différent. Si l’entrée est sélectionnée, alors on affiche les liens correspondant (dans le tableau ‘mv_lien’).

// On boucle sur les rubriques
for(a=0;a<mv_menu.length;a++) {
    // Est-ce que la rubrique est sélectionnée ?
    if(mv_pos == a || !document.getElementById) {
        bgcolor = "#00ff00";
    } else {
        bgcolor = "#FF9900";
    }

    if(document.getElementById) {
        mv_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=..//%22#/%22 onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\" CLASS=mv2style><FONT FACE=\"Courrier\" SIZE=2><B>"+mv_menu[a]+"</B></FONT></A></TD></TR>";
    } else {
        mv_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Courrier\" SIZE=3 COLOR=#0000FF><B>"+mv_menu[a]+"</B></FONT></TD></TR>"
    }

    // Si la rubrique est sélectionnée, on affiche ses liens
    if(mv_pos == a || !document.getElementById) {
        mv_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\"Courrier\" SIZE=2><B>"+mv_lien[a]+"</B></FONT></TD></TR>";
    }
}

Laisser un commentaire