Accueil > > > 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
 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> Afficher/masquer
- 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> 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> 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> 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> 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> 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> 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> Afficher/masquer
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> 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> 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> 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> 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> 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> 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 de la même categorie
 Commentaires et avis
|
Derniers Blogs
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|