- <html>
- <!-- Date de création: 06/11/2004 -->
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>Menu animé glissant à gauche de l'écran</title>
- <meta name="author" content="MadMatt">
- <style>
- <!--
- #slidemenubar, #slidemenubar2{
- position:absolute;
- left:-155px;
- width:160px;
- top:170px;
- border:1.5px solid green;
- background-color:#d4d4d4;
- layer-background-color:lightyellow;
- font:bold 14px Courrier New;
- line-height:20px;
- }
- -->
- </style>
-
- </head>
- <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
-
- <script language="JavaScript1.2">
- /*
- Script Barre de menu coulissante
- */
- if (document.all)
- document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">');
- </script>
- <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
- <script language="JavaScript1.2">
- var sitems=new Array();
- var sitemlinks=new Array();
- //ajoutez ou retirez des éléments de cette liste
- // si on met un "-" pour le texte, alors ça dessine un trait horizontal vert
- sitems[0]="-";
- sitemlinks[0]="";
- // Affiche le texte Menu (centré, mais on peut aussi mettre plein d'autres paramêtres, comme gras...)
- sitems[1]="<div align='center'>Menu</div>";
- sitemlinks[1]="";
- // Ici un item typique avec texte + lien
- sitems[2]="Accueil";
- sitemlinks[2]="Index.html";
- // Ici un item sans lien (non cliquable)
- sitems[3]="Sans lien";
- sitemlinks[3]="";
- // Une séparation
- sitems[4]="-";
- sitemlinks[4]="";
- // Un exemple : pour le lien on peut mettre une adresse mail
- sitems[5]="Me contacter";
- sitemlinks[5]="mailto:MadMatt_12@Msn.com";
- // Puis.... une séparation c'est bien y'en a qui suivent
- sitems[6]="-";
- sitemlinks[6]="";
-
- // Maintenant on va traiter tout le tableau pour l'afficher
- for (i=0;i<=sitems.length-1;i++)
- // Ici ça affiche tous les séparateurs (on peut changer la couleur)
- if (sitems[i]=="-"){
- document.write('<hr width="90%" size="1" noshade color="#008000">');
- }
- else{
- // Ici ça affiche les items sans liens
- if (sitemlinks[i]==""){
- /* L'espace ' ' (ALT + 0160) est un espace insecable, qui oblige IE à le dessiner,
- c'est pour éviter d'avoir le texte collé au bord gauche du menu */
- document.write(' '+sitems[i]);
- }
- else{
- // Ici les items classiques, liens + texte
- document.write(' <a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>');
- }
- }
- </script>
- </layer>
- <script language="JavaScript1.2">
- function regenerate(){
- window.location.reload();
- }
- function regenerate2(){
- if (document.layers)
- setTimeout("window.onresize=regenerate",400);
- }
- window.onload=regenerate2;
- if (document.all){
- document.write('</div>');
- themenu=document.all.slidemenubar2.style;
- rightboundary=0;
- leftboundary=-100;
- }
- else{
- themenu=document.layers.slidemenubar;
- rightboundary=100;
- leftboundary=10;
- }
- function pull(){
- if (window.drawit)
- clearInterval(drawit);
- pullit=setInterval("pullengine()",10);
- }
- function draw(){
- clearInterval(pullit);
- drawit=setInterval("drawengine()",10);
- }
- function pullengine(){
- if (document.all&&themenu.pixelLeft<rightboundary)
- themenu.pixelLeft+=5;
- else if(document.layers&&themenu.left<rightboundary)
- themenu.left+=5;
- else if (window.pullit)
- clearInterval(pullit);
- }
- function drawengine(){
- if (document.all&&themenu.pixelLeft>leftboundary)
- themenu.pixelLeft-=5;
- else if(document.layers&&themenu.left>leftboundary)
- themenu.left-=5;
- else if (window.drawit)
- clearInterval(drawit);
- }
- </script>
-
- Le menu est personnalisable par l'intermédiaire d'un tableau :<br>
- pour chaque item, 2 paramêtres :<br>
- <dd>- le texte qui si est égal à "-" alors on dessine un séparateur vert horizontal<br>
- <dd>- le lien qui si est nul alors on ne met pas de lien<br>
-
- </body>
- </html>
<html>
<!-- Date de création: 06/11/2004 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu animé glissant à gauche de l'écran</title>
<meta name="author" content="MadMatt">
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:#d4d4d4;
layer-background-color:lightyellow;
font:bold 14px Courrier New;
line-height:20px;
}
-->
</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<script language="JavaScript1.2">
/*
Script Barre de menu coulissante
*/
if (document.all)
document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">');
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems=new Array();
var sitemlinks=new Array();
//ajoutez ou retirez des éléments de cette liste
// si on met un "-" pour le texte, alors ça dessine un trait horizontal vert
sitems[0]="-";
sitemlinks[0]="";
// Affiche le texte Menu (centré, mais on peut aussi mettre plein d'autres paramêtres, comme gras...)
sitems[1]="<div align='center'>Menu</div>";
sitemlinks[1]="";
// Ici un item typique avec texte + lien
sitems[2]="Accueil";
sitemlinks[2]="Index.html";
// Ici un item sans lien (non cliquable)
sitems[3]="Sans lien";
sitemlinks[3]="";
// Une séparation
sitems[4]="-";
sitemlinks[4]="";
// Un exemple : pour le lien on peut mettre une adresse mail
sitems[5]="Me contacter";
sitemlinks[5]="mailto:MadMatt_12@Msn.com";
// Puis.... une séparation c'est bien y'en a qui suivent
sitems[6]="-";
sitemlinks[6]="";
// Maintenant on va traiter tout le tableau pour l'afficher
for (i=0;i<=sitems.length-1;i++)
// Ici ça affiche tous les séparateurs (on peut changer la couleur)
if (sitems[i]=="-"){
document.write('<hr width="90%" size="1" noshade color="#008000">');
}
else{
// Ici ça affiche les items sans liens
if (sitemlinks[i]==""){
/* L'espace ' ' (ALT + 0160) est un espace insecable, qui oblige IE à le dessiner,
c'est pour éviter d'avoir le texte collé au bord gauche du menu */
document.write(' '+sitems[i]);
}
else{
// Ici les items classiques, liens + texte
document.write(' <a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>');
}
}
</script>
</layer>
<script language="JavaScript1.2">
function regenerate(){
window.location.reload();
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400);
}
window.onload=regenerate2;
if (document.all){
document.write('</div>');
themenu=document.all.slidemenubar2.style;
rightboundary=0;
leftboundary=-100;
}
else{
themenu=document.layers.slidemenubar;
rightboundary=100;
leftboundary=10;
}
function pull(){
if (window.drawit)
clearInterval(drawit);
pullit=setInterval("pullengine()",10);
}
function draw(){
clearInterval(pullit);
drawit=setInterval("drawengine()",10);
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5;
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5;
else if (window.pullit)
clearInterval(pullit);
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5;
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5;
else if (window.drawit)
clearInterval(drawit);
}
</script>
Le menu est personnalisable par l'intermédiaire d'un tableau :<br>
pour chaque item, 2 paramêtres :<br>
<dd>- le texte qui si est égal à "-" alors on dessine un séparateur vert horizontal<br>
<dd>- le lien qui si est nul alors on ne met pas de lien<br>
</body>
</html>