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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 24 864 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

canniballette
Messages postés
3
Date d'inscription
dimanche 18 avril 2004
Statut
Membre
Dernière intervention
16 avril 2007

Bonjour, Comment fait on pour rajouter un onglet au menu ? merci
riiac
Messages postés
1
Date d'inscription
samedi 18 novembre 2000
Statut
Membre
Dernière intervention
8 juin 2005

Très jolie menu
ducseb
Messages postés
9
Date d'inscription
mercredi 12 mai 2004
Statut
Membre
Dernière intervention
12 septembre 2006

Bon menu cool :-)
cs_MAsterC
Messages postés
217
Date d'inscription
lundi 4 février 2002
Statut
Membre
Dernière intervention
19 décembre 2012

Jolie travail!
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.