Trucsweb.com

Trucsweb.com

DHTML

Le menu caché

RDFFav

Le menu caché - compatible IE et Netscape.

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.menu caché navigation dhtml javascript html dynamic dynamique timer liens link div style layer positionLe menu caché - compatible IE et Netscape.

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...
<stylegt;
<!--
.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>
<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.

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 3258 - Pages vues : 21069
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@