Franc83

Menu images css

26-07-2008

[ Montrer le Menu ]

Un menu java CSS à base d'images

Menu à partir d'images qui changent au rollover de la souris

Télécharger le pack :

Le Css du menu :

.itemIOff { width:126px; text-align:center; background: url(tabI0.gif); }
.itemIOn { width:126px; text-align:center; background: url(tabI1.gif); }

.fontOff { font-family:verdana; font-size:10pt; font-weight:bold; line-height:30px; color:#ff6600; }
.fontOn { cursor:default; font-family:verdana; font-size:10pt; font-weight:bold; line-height:30px; color:#333333; font-style:italic; }
.fontSubOff { font-family:verdana; font-size:10pt; font-weight:bold; line-height:24px; color:#ff6600; }
.fontSubOn { cursor:default; font-family:verdana; font-size:10pt; font-weight:bold; line-height:24px; color:#333333; }

.separatorT { background: url(tabT.gif); height:10px; }
.separatorB { background: url(tabB.gif); height:10px; }
</style>

Ce menu est tout en images, excepté pour le texte. La première et dernière option du menu utilisent leurs propres image fermante, les trois options centrales partagent la meme image, ainsi que les items des sous-menus qui sont partagés, et les bordures haute et basse, qui sont des séparateurs à partir d'images.

Créer des liens pour le menu :

addMenu("Demo", "demo-top");

addSubMenu("demo-top", "ACCUEIL", "", "", "sub-1", "tabl");
addSubMenu("demo-top", "TELECHARGER", "", "", "sub-2", "tabm");
addSubMenu("demo-top", "FORUM", "", "", "sub-3", "tabm");
addSubMenu("demo-top", "CONTACTS", "", "", "sub-4", "tabm");
addSubMenu("demo-top", "ADMIN", "", "", "sub-5", "tabr");

addSeparator("sub-1", "tabt");
addLink("sub-1", "Accueil", "", "http://hebergeur/index.php?lng=fr", "tabi");
addLink("sub-1", "Forum", "", "http://hebergeur/fortopic.php?lng=fr", "tabi");
addLink("sub-1", "Lvre d\'Or", "", "http://hebergeur/guestbk.php?lng=fr", "tabi");
addLink("sub-1", "Générateurs", "", "http://hebergeur/gencodevideo/gencodevideo.php?lng=fr", "tabi");
addSeparator("sub-1", "tabb");

....................................

Vous devez intégrer les liens dans l'avant dernier "",:
"http://hebergeur/index.php?lng=fr",

Ceci uniquement dans la déclaration addlink, pas dans la déclaration addSeparator qui est pour les séparateurs de menus, ou dans addSubMenu qui sert à présenter les titres de rubriques.

Ce menu est assez complexe à mettre en place. Les internautes qui peuvent le réaliser trouveront dans le pack les fichiers nécessaires à l'installation et à la mise en oeuvre de leurs propres contenus. Il serait trop fastidieux et trop long de développer ici tous les réglages à mettre au point.

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 Filtres IE Menu slide Frames 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