begin process at 2010 02 10 00:18:12
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > UN BEAU MENU QUI S'AFFICHE ET SE MASQUE AVEC DU STYLE

UN BEAU MENU QUI S'AFFICHE ET SE MASQUE AVEC DU STYLE


 Information sur la source

Note :
7,9 / 10 - par 10 personnes
7,90 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Débutant Date de création :25/03/2004 Vu :18 358
Auteur : semetic

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Tout les commentaires sont dans le code

Source

  • <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> 
<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>



 Sources du même auteur

COMPTEUR À REBOURS SECONDES, MINUTES ET HEURES DHTML(JAVASCR...
CHANGEMENT DU STYLE DES ZONES DE TEXTE PENDANT LA FOCALISATI...
UN SEUL ALERT POUR TOUTES LES ERREURS DE VALIDATION D'UN FOR...
UN SEUL ALERT POUR TOUTES LES ERREURS DE VALIDATION D'UN FOR...
ENCHAINEMENT DE MESSAGES EN BOUCLE FASCINANT
Toutes les sources de semetic

 Sources de la même categorie

Source avec Zip Source avec une capture MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma
Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE par dlvains
Source avec Zip Source avec une capture MENU DÉROULANT EN IMAGES par dlvains
Source avec Zip TBFRAME: TAB BROWSING FRAME par triumphs
Source avec Zip Source avec une capture MENU PRINCIPAL par ali1987
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de Jsman le 25/03/2004 21:58:07

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    :)

Commentaire de tongbong le 15/04/2004 21:26:52

Salut,
moi je dis bravo : c tout simple et super joli, y a moyen de faire de joli menu.

Commentaire de jim333 le 18/04/2004 15:17:08

bravo pour le script bien que j'aime pas le couleur sa se change en un rien de temp bravo 8/10.....

Commentaire de guizmoworld le 27/04/2004 21:30:27

super beau
modulable tout ce qu'il faut ...
bravo 9/10

Commentaire de bedo_one le 06/08/2004 10:41:43

très bien oui, mais dommage l'incompatibilité avec netscape... 6/10 (ce serait 9/10 si compatible)

Commentaire de MAsterC le 05/10/2004 00:12:49

Jolie travail!

Commentaire de ducseb le 31/10/2004 12:11:23

Bon menu cool :-)

Commentaire de riiac le 08/06/2005 09:52:30

Très jolie menu

Commentaire de canniballette le 22/02/2006 17:12:32

Bonjour, Comment fait on pour rajouter un onglet au menu ? merci

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,437 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)