Menu animé glissant sur le bord de l'écran

Soyez le premier à donner votre avis sur cette source.

Snippet vu 19 194 fois - Téléchargée 32 fois

Contenu du snippet

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

A voir également

Ajouter un commentaire

Commentaires

isu_san
Messages postés
63
Date d'inscription
lundi 6 septembre 2004
Statut
Membre
Dernière intervention
26 juillet 2011

C'etait bien ca, merci
MadM@tt
Messages postés
2215
Date d'inscription
mardi 11 novembre 2003
Statut
Membre
Dernière intervention
16 juillet 2009

De tete je saurais pas te dire précisément.
Essaye de remplacer les "5" dans les 2 dernières fonctions, essaye de trifouiller lol tu tombera bien dessus ;)
isu_san
Messages postés
63
Date d'inscription
lundi 6 septembre 2004
Statut
Membre
Dernière intervention
26 juillet 2011

Bonjour à tous........ bon si on revenait au script, je suis debutant et j'ai pas trouvé tout seul. Est ce que la vitesse d'ouverture et de fermeture du menu est parametrable ? merci
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
j'ai trouvé bien mieux en CSS :

position:fixed;

pas mal non ?
coucou747
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
30
je sais que mon menu déborde et de déplace vers le bas parfois je débute en pseudo frames... Mélanger php + js, j'arrives en général, masi pour un truc d'autant de pages... J'aurais du m'occuper de mon site plus tot... Y ajouter du php plus tot...

Je sias que mes stats ne sont pas fiables, mais je les ai retrouvé un peu partout... le seul endroit au j'ai vu qqch du même ordre de grandeur que ce que toi tu disais, c'était dans un bookin pro microsoft (ou ils sont allés jusqu'a dire que linux n'était pas stable et qu'il ne pouvait pas aporter les mêmes fonctionalitées qu'un windows...) Donc, j'en ai conclue que ce bookin n'était pas digne de confiance ^^ ...

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.