Un beau menu qui s'affiche et se masque avec du style

Soyez le premier à donner votre avis sur cette source.

Snippet vu 24 840 fois - Téléchargée 29 fois

Contenu du snippet

Tout les commentaires sont dans le code

Source / Exemple :


<html>
<head>
<title>menu</title>
<!--

  • L'ensemble de ce code JavaScript / VBscript / HTML-style *
  • est libre d'utilisation sous réserve de laisser le *
  • commentaire suivant dans chaque script: *
  • *
  • "Auteur: FARID / ALGERIE E-mail: sidoummoudz@yahoo.fr" *
  • Bonne utilisation *
--> <style> .classe{ font-family:verdana; font-size:9pt; color:#66EEC0; cursor:hand; } </style> <script language="javascript"> <!-- //Ce que suit c'est pour le changement du style du menu quand la souris se pointe //sur. function change_menu(){ menu.style.color="#0C0C5E"; //couleur de surbrillance de police menu.style.backgroundColor="red"; //couleur de surbrillance de l'arrière plan } //Ce que suit c'est pour le changement du style des items quand la souris se pointe //sur. function change(divers){ divers.style.color="#0C0C5E"; //couleur de surbrillance de police divers.style.backgroundColor="#66EEC0"; //couleur de surbrillance de l'arrière plan } //Cette partie c'est pour le changement du style onMouseout (retour à la couleur d'origine) function change_rev(divers){ divers.style.color="#66EEC0"; //couleur d'origine de police divers.style.backgroundColor="#0C0C5E"; //couleur d'origine de l'arrière plan } //--> </script> <meta name="generator" content="Namo WebEditor v4.0"> </head> <body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" > <table width="136" cellspacing="0" bgcolor="#0C0C5E" cellpadding="0" > <tr> <!--On doit donner un identificateur id à cette élément inséré dans une couche ou non, dans notre cas "menu" ou il doit etre cité dans la première fonction du scriptjava "menu.style..etc". La classe c'est pour que les informations citées dans le style avant javascript y prendre effet. --> <td id="menu" class="classe" onClick="apparition()" onMouseover="change_menu()" onMouseout="change_rev(menu)" width="136" height="20"><p align="left"><b>&nbsp;Afficher/masquer &nbsp;le menu</b></p></td> </tr> </table> <!-- On doit donner aussi un identificateur à la couche suivante qui contient les tables des items. Dans le style elles sonts configurables et paramétrables: la largeur,la hauteur, la position par rapport à la marge gauche et haut, la transition "duration pour le temps et transition la manière "il y a de0 à 23" mais pour effet de fondu on met blendTrans au lieu de revealTranset ne pas mettre l'expression "transition=..." et l'opacité (transparence) --> <DIV id="couche" style="width:137px; height:138px; position:absolute; left:0px; top:28px; z-index:1; visibility:hidden; filter:revealtrans(duration=1,transition=12) alpha(opacity=80)"> <!-- Dans les items suivants, dans l'évènement onClick ,location='_top' cela ouvrira les pages cibles dans la meme fenetre, '_self' dans le meme cadre que le menu si le document est en cadres et '_blank' dans une nouvelle fenetre. NB: si vous voulez que les pages cibles s'ouvrirons dans la meme nouvelle fenetre pour ne pas perdre la page contenant le menu et les nouvelles pages ne s'accumulerons pas dans la barre d'etat, vous devez donner un nom à la nouvelle fenetre. Exemple: onClick="javascript:window.open('aboutus.htm','newwindow','height=350,width=650,status=yes,toolbar=yes,menubar=yes')" onClick="javascript:window.open('modeles.htm','newwindow','height=350,width=650,status=yes,toolbar=yes,menubar=yes')" et ainsi de suite... --> <table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('aboutus.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b>&nbsp;Qui sommes nous</b></p> </td></tr></table> <table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('modeles.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b>&nbsp;Modeles</b></p></td></tr></table> <table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('motorisation.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b>&nbsp;Motorisations</b></p></td></tr></table> <table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('equipements.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b>&nbsp;Equipements</b></p> </td></tr></table> <table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('support.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b>&nbsp;Support</b></p></td></tr></table> <table class="classe" onMouseover="change(this)" onMouseout="change_rev(this)" onClick="javascript:window.open('contacts.htm',location='_top')" width="136" cellpadding="0" cellspacing="0" bgcolor="#0C0C5E"><td width="136" height="23" ><p align="left"><b>&nbsp;Contact</b></p></td></tr></table> </DIV> <script language=vbscript> <!-- //La fonction suivante contient une boucle qui sert à afficher et masquer //les items du menu avec le meme évènement "onClick" Sub apparition() If couche.style.visibility="hidden" Then call couche.filters.item(0).apply() couche.style.visibility="visible" call couche.filters.item(0).play() Else call couche.filters.item(0).apply() couche.style.visibility="hidden" call couche.filters.item(0).play() End If End Sub //--> </script> <p>Ce texte reste relativement </p> <p>visible</p> </body> </html>

A voir également

Ajouter un commentaire

Commentaires

Jsman
Messages postés
264
Date d'inscription
jeudi 31 juillet 2003
Statut
Membre
Dernière intervention
12 juillet 2005
-
Je te remerci de poster des sources très commentées (ce qui est très rare) !

Pour le script en lui-même, c'est bien, c'est assez réutilisable...
bravo : 9/10

P.S. quand tu postes tes sources évite de mettre du VBscript dedans :)
tongbong
Messages postés
2
Date d'inscription
jeudi 24 avril 2003
Statut
Membre
Dernière intervention
15 avril 2004
-
Salut,
moi je dis bravo : c tout simple et super joli, y a moyen de faire de joli menu.
cs_jim333
Messages postés
33
Date d'inscription
mardi 26 août 2003
Statut
Membre
Dernière intervention
28 mai 2005
-
bravo pour le script bien que j'aime pas le couleur sa se change en un rien de temp bravo 8/10.....
guizmoworld
Messages postés
26
Date d'inscription
lundi 19 avril 2004
Statut
Membre
Dernière intervention
7 juillet 2004
-
super beau
modulable tout ce qu'il faut ...
bravo 9/10
bedo_one
Messages postés
25
Date d'inscription
jeudi 29 avril 2004
Statut
Membre
Dernière intervention
27 décembre 2004
-
très bien oui, mais dommage l'incompatibilité avec netscape... 6/10 (ce serait 9/10 si compatible)

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.