Franc83

Menu Filtres IE

25-07-2008

[ Montrer le Menu ]

Menu utilisant les filtres de transitions IE

Ce menu ne fonctionnera avec les filtres que sous internet explorer, sous firefox, il sera normal

Télécharger le pack :

Le CSS du menu :

.bar { padding:2px; border-width:1px; border-style:solid; border-color:#000000; background-color:#336699; }

.itemTopL1 {
filter: progid:DXImageTransform.Microsoft.Iris(irisstyle=CROSS,motion=out);
cursor:default; width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:center;
}
.itemTopS1 {
filter: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.00,wipestyle=1,motion=forward);
cursor:default; width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
}
.itemTopS2 {
filter: progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.5);
cursor:default; width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
}
.itemTopS3 {
filter: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=RADIAL);
cursor:default; width:130px; padding:2px; border-width:1px; border-style:solid; text-align:center;
}
.itemTopL2 {
FILTER: progid:DXImageTransform.Microsoft.Strips(motion=rightdown);
cursor:default; width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:center;
}

.itemSub {
filter: progid:DXImageTransform.Microsoft.Slide(slidestyle=PUSH,Bands=1,duration=0.5);
cursor:default; width:120px; padding:2px 2px 2px 12px; border-width:1px; border-style:solid; text-align:left;
}
.itemNormal { cursor:default; border-color:#6699cc #003366 #003366 #6699cc; background-color:#336699; }
.itemOn { cursor:default; border-color:#99ccff #003366 #003366 #99ccff; background-color:#6699cc; }
.itemDown { cursor:default; border-color:#000033 #6699cc #6699cc #000033; background-color:#003366; }

.fontNormal { font-family:verdana; font-size:14px; color:#000000; }
.fontOn { font-family:verdana; font-size:14px; color:#ff6600; }
.fontDown { font-family:verdana; font-size:14px; color:#ffffff; font-style:italic; }

.tagNormal { float:right; width:10px; height:10px; background: url(tagRN2.gif) no-repeat bottom; }
.tagOn { float:right; width:10px; height:10px; background: url(//tagRH2.gif) no-repeat bottom; }
.tagDown { float:right; width:10px; height:10px; background: url(tagRD2.gif) no-repeat bottom; }
</style>

Lancement du script :

..........................
<link rel=stylesheet href="/css/menuG5.css" type="text/css">

<body onload="showMenu('Demo')">
<table cellpadding="0" cellspacing="0" border="0" align="center"><tr><td id="holder"> </td></tr></table><br clear="all">
.....................

Les filtres IE disponibles pour les effets :

Fade in	<meta http-equiv="Page-Enter" content="blendTrans(duration=2.0)">
Square in	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=0)">
Square out	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=1)">
Circle in	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=2)">
Circle out	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=3)">
Curtain up	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=4)">
Curtain down	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=5)">
Curtain right	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=6)">
Curtain left	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=7)">
Vertical blinds	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=8)">
Horizontal blinds	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=9)">
Boxy vertical blinds	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=10)">
Boxy horizontal blinds	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=11)">
Dissolve	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=12)">
Elevator close	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=13)">
Elevator open	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=14)">
Elevator horizontal close	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=15)">
Elevator horizontal open	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=16)">
Diagonal top right	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=17)">
Diagonal bottom right	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=18)">
Diagonal top left	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=19)">
Diagonal bottom left	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=20)">
Horizontal lines	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=21)">
Vertical lines	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=22)">
Random	<meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=23)">
Mosaïque	<meta http-equiv="Page-Enter" content="FILTER:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50); ">

Pour le reste, le menu étant assez complexe à mettre en oeuvre, je ne donnerai pas ici d'explications supplémentaires, voyez dans les fichiers js et dans le code source les réglages à effectuer.

crédits : yxScripts.com

Dans le même esprit
Boutons rollover Div boutons Loader Ajax Menu Barre CSS Menu cascade Menu Diodes Menu Fade Menu latéral css Loupe horizontale Loupe verticale Menu Outlook Express Menu Slide java Menu nowrap Menu slide Frames Menu images css Barre CSS java Menu en iframes Menu en pur CSS Menu multi-slide

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront