Le menu caché compatible IE et Netscape. par Django (Oznog) Blais, Trucsweb (4 Avril 2000)
La technique consiste à créer un objet (le menu) et de la positionner à l'extérieur de la fenêtre, une barre verticale sera le bouton utilisé pour faire apparaître et disparaître le menu.
L'objet en question contient 3 objets; le menu avec une image de fond, la barre verticale et une image au bas du menu. .
Vous avez la possibilité de définir 7 liens dans votre menu. Pour vous faciliter la tâche, les liens ainsi que leur adresse "URL" sont emmagasinés dans des variables de façon à vous permettre de les modifier aisément.
Pour ajouter le menu à votre document HTML vous devez premièrement définir les choix de votre menu caché (en bleu). Si vous avez moins de 7 choix, ne rien mettre dans le lien et utiliser le symbole # pour le "URL.":
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Début
// Définir les liens
var lien1 = "Lien 1";
var url1 = "http://www...";
var lien2 = "Lien 2";
var url2 = "http://www...";
var lien3 = "Lien 3";
var url3 = "http://www...";
var lien4 = "Lien 4";
var url4 = "http://www...";
var lien5 = "Lien 5";
var url5 = "http://www...";
var lien6 = "Lien 6";
var url6 = "http://www...";
var lien7 = "";
var url7 = "#";
// Fin -->
// Un peu de style...
<STYLE>
<!--
.liens {font-family:arial;font-size:12px;color:#000000;text-decoration:none;}
a:link {color="#000000"; text-decoration: none}
a:visited {color="#999999"; text-decoration: none}
a:hover {color="#FFFFFF"; text-decoration: none}
-->
</STYLE>
</SCRIPT>
</HEAD>
Activer le menu dans la balise BODY
de votre document :.
<BODY
onLoad="voirMenu(-150,0,0,0,-157,0);">
Pour afficher le menu, ajoutez cette
ligne de commande entre la fermeture de la balise BODY et la fermeture de la balise
HTML, cette commande appelle le fichier INCLUDE mcache.js :
…
</BODY>
<SCRIPT LANGUAGE="javascript" SRC="mcache.js"></SCRIPT>
</HTML>
Créer un fichier externe avec le
nom mcache.js qui génère le menu, vous n'avez rien à modifier dans ce script.
Bien que n'ayez pas a modifier le fichier INCLUDE mcache.js et qu'il est
dans le fichier ZIP à télécharger, voici le code source du
script.
//
Définission des objets
var nav = (document.layers) ? true : false;
var iex = (document.all) ? true : false;
var v_menu =('<table border=0 cellpadding=0 cellspacing=0 width=150 height=155
bgcolor=#000000 background=f_menu.jpg><TR><TD valign=top>
<FONT FACE=Arial,Helvetica COLOR=#FFFFFF SIZE=2>
<CENTER><BR><BR><A HREF='+url1+'><B>'+lien1+'</B></A><BR>
<A HREF='+url2+'><B>'+lien2+'</B></A><BR>
<A HREF='+url3+'><B>'+lien3+'</B></A><BR>
<A HREF='+url4+'><B>'+lien4+'</B></A><BR>
<A HREF='+url5+'><B>'+lien5+'</B></A><BR>
<A HREF='+url6+'><B>'+lien6+'</B></A><BR>
<A HREF='+url7+'><B>'+lien7+'</B></A><BR>
</CENTER></TD></TR></TABLE>');
var v_bas =('<IMG SRC=bas.gif WIDTH=150 HEIGHT=13 BORDER=0>');
var v_bar =('<IMG SRC=barre2.gif WIDTH=24 HEIGHT=155 BORDER=0 alt=cliquer onmouseup=inverse();>');
// Affichage des objets du menu selon le navigateur
if(iex) document.write('
<DIV ID = obj1 STYLE=position:absolute;
TOP:0px;LEFT:-157px;visibility:visible;width:150px;bgcolor:#0000ff;>'
+v_menu+' <DIV ID = bas STYLE=position:absolute;TOP:142px;
LEFT:0px;visibility:visible;width:150px;height:13px;>'
+v_bas+'</DIV><DIV ID = barre STYLE=position:absolute;TOP:0px;
LEFT:150px;visibility:visible;width:24px;height:155px;>'
+v_bar+'</DIV></DIV>');
if(nav) document.write('
<layer id=obj1 TOP=0 LEFT=-157 width=150>'
+v_menu+'<layer id=bas TOP=142 LEFT=0 width=150 height=13>'
+v_bas+'</LAYER><layer id=barre TOP=0 LEFT=150 width=24 height=155>'
+v_bar+'</LAYER></LAYER>');
// Vitesse à laquelle le menu s'affiche...
var speedx = -500;var speedy = 0;
// Fonction qui permet d'afficher le menu ou de le retirer...
function voirMenu(minx,maxx,miny,maxy,posx,posy) {
if(iex){tailley = document.body.clientHeight;
taillex = document.body.clientWidth;
offsety = document.body.scrollTop;
offsetx = document.body.scrollLeft;};
if(nav){tailley = window.innerHeight;
taillex = window.innerWidth;
offsety = window.pageYOffset;
offsetx = window.pageXOffset;};
(posx+=speedx);
posy=offsety;
if(posx>maxx){posx=maxx;};
if(posx<minx){posx=minx;};
if(iex){document.all.obj1.style.left=posx;document.all.obj1.style.top=posy;};
if(nav){document.obj1.left=posx;document.obj1.top=posy;};
tempo=window.setTimeout('
voirMenu('+minx+','+maxx+','+miny+','+maxy+','+posx+','+posy+')',5);}
//
Fonction qui ajute la variable qui permet de savoir si on retire ou on affiche
le menu...
function inverse() {speedx = -speedx;}
N'oubliez pas de sauvegarder les
deux fichiers créés et les trois images dans le même répertoire.
|
|
