- · Niveau : INTERMÉDIAIRE
- · Compatibilité : IE 4+ / Netscape 4+
- · Voir l’exemple
- · Fichier à télécharger
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.
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion