Salut tous les javascriptiens ! c'est mon premier code ici alors soyez indulgent si c'est mal écrit ou autre, et je suis parti d'un code existant dans un logiciel, je l'ai juste amélioré en amenant des options.
Donc voilà j'espère que ça servira certains.
Source / Exemple :
<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>
Conclusion :
à bientot, ce site me plait, comme vbfrance, je crois que je vais revenir souvent
@ +
MadMatt
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.