Si tout le texte ne s'affiche pas, voir la source.

Menu slide vu chez Dynamic Drive
http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm

Je ne m'approprie pas ce menu, je le décortique en français à usage 
des lecteurs du forum Code de la Falkenzone.com.


Explicatif
Les lignes javascript d'explications inactives sont précédées de //
Dans le body : les lignes de commentaires html sont entre <!-- et --> 
A supprimer a la mise en ligne, sauf les balises de commentaires html dans le style ci-dessous
Voir le menu qui fonctionne dans : 
http://tophy52.free.fr/docs/menuslide.html



Partie a mettre dans le 
head
<title>ici le titre de la page</title>


<!-- Ci dessous : 
en-tete indispensable, a laisser : 
font reference aux 2 parties du script:
le div id #slidemenubar2
et le layer id #slidemenubar
definition de la position du menu (gauche et haut), sa largeur,
du filet de contour de couleur vert en pix : 1.5,
oui, etonnement il accepte les cinqiemes de pix 
puis la couleur du bg et la couleur du bg de la layer
puis la fonte et l interlignage -->

<style>
<!--
#slidemenubar, #slidemenubar2
{
position:absolute;
left:-165px;
width:170px;
top:25px;
border:1.5px solid green;
background-color:#CC9966;
layer-background-color:#CC9966;
font:bold 11px Arial;
line-height:18px;
}
-->
</style>
</head>


<!-- Partie a mettre dans le body 
- Le positionnement de left -165 doit etre identique ici et au dessus et voir plus bas 
- La couleur des links est a mettre dans les text= link= vlink= alink= du body -->


<script language="JavaScript1.2">
if (document.all)
document.write('<div id="slidemenubar2" style="left:-165; z-index:5" onMouseover="pull()" onMouseout="draw()">')
</script>

<!-- identification du layer  -->

<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()" visibility="show" above="" left="24" top="14"> 

<!-- le javascript du layer
il peut comporter autant de sitems que nécessaire, 
ils sont relies aux sitemlinks, les liens, voir plus bas  
J ai joue avec des chapitres et  des liens, voir 0, 3 et 8 avec les puces noires &#149;
Mes chapitres ne vont nulle part (voir : sitemlinks[0]=""), seules les pages ont un lien.
Ici les accents sont a mettre en html -->


<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()
//liste visible dans le menu.
sitems[0]="&#149; &#149; PREMIER &#149; &#149;"
sitems[1]="un"
sitems[2]="deux"
sitems[3]="&#149; &#149; DEUXI&Egrave;ME &#149; &#149;"
sitems[4]="Trois"
sitems[5]="Quatre"
sitems[6]="Cinq"
sitems[7]="Six"
sitems[8]="&#149; &#149; TROISI&Egrave;ME &#149; &#149;"
sitems[9]="Sept"
sitems[10]="Huit"

//Liens vers les pages du menu.

sitemlinks[0]=""
sitemlinks[1]="Un.html"
sitemlinks[2]="Deux.html"
sitemlinks[3]=""
sitemlinks[4]="trois.html"
sitemlinks[5]="quatre.html"
sitemlinks[6]="cinq.html"
sitemlinks[7]="six.html"
sitemlinks[8]=""
sitemlinks[9]="sept.html"
sitemlinks[10]="huit.html"

// Ci dessous dans documentwrite, 
// les 2 &nbsp; sont la pour decaler les liens du bord de page sous les chapitres, a enlever.

for (i=0;i<=sitems.length-1;i++) {
  if (sitemlinks[i] == "")
    document.write(sitems[i]+'<br>');
  else
    document.write('&nbsp;&nbsp;<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>');
}
</script>
</layer>

<!-- Fin du layer d affichage, suit le javascript de fonctionnement  -->

<script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}

// ici, reglage identique de -165 pour largeur de menu et 
// ce qui va rester de visible pour l attrapper

window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-165
}
else{
themenu=document.layers.slidemenubar
rightboundary=163
leftboundary=10
}

// ici, vitesse de deplacement du layer
// 10 = rapide, 50 = moyen, 100 = lent
// pull peut etre different de draw

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",20)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",20)
}

// ici, distance de deplacement du bord de page
// a regler en fonction des besoins, 
// faire des tests de distance en pixels

function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=15
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}

// ici, distance de deplacement du bord de page
// quand il se referme
// themenu.pixelLeft-=25 le fait disparaitre completement a gauche

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>