Un menu barre et déroulant
Ce menu barre est à la fois un menu CSS
éroulant java
Voir le menu barre en popup :
Voir le menu barre css javascript
Télécharger le pack:
Teneur de la déclaration CSS :
<style
type="text/css">
.padTop { background-color:#ffffff; }
.itemTopOff
{ padding:5px 10px; background-color:#cccccc; }
.itemTopOn
{
cursor:default; padding:5px 10px; background-color:#666666;
}
.padSub { background-color:#ffffff; }
.itemSubOff { padding:5px 10px; border:1px solid #6699cc; background-color:#6699cc;
}
.itemSubOn { cursor:default; padding:5px 10px; border:1px solid
#6699cc; background-color:#336699; border-color:#003366 #6699cc
#6699cc #003366; }
.itemSub2Off { width:90px; border:1px solid #000000; padding:0px
10px; background-color:#6699cc; }
.itemSub2On { cursor:default; width:90px; border:1px solid #000000;
padding:0px 10px; background-color:#336699; }
.fontOff { font-family:verdana; font-size:12pt; color:#000000;
}
.fontOn { font-family:verdana; font-size:12pt; color:#ff6600;
}
</style>
|
Déclaration des scripts :
...........................
<script language="javascript" src="bar-path.js"></script>
<script language="javascript" src="script/menuG5LoaderX.js"></script>
</head>
<body onload="showMenu('Demo')" topmargin="0"
leftmargin="0" rightmargin="0" bottommargin="0"
marginwidth="0" marginheight="0">
<table width="100%" bgcolor="#cccccc" cellpadding="0"
cellspacing="0" border="0">
<tr><td bgcolor="#cccccc"><div class="itemTopOff
fontOff"> </div></td></tr>
<tr><td bgcolor="#1E90FF"><div class="itemSubOff
fontOff"> </div></td></tr>
</table>
..................................
|
Dans cet exemple nous avons créé un tableau
pour contenir le menu :
Le fait de mettre un " "dans la cellule du tableau
avec la class CSS de l'item du menu, fait que les deux rangées
ont la même hauteur.
La position du sous-menu de premier niveau est réglée par
"abs-center-down", qui regroupe et centre le sous-menu sous le menu principal.
Mise en place des liens :
Ils se font dans le fichier content.js et se structurent comme suit
:
addMenu("Demo", "demo-top");
addLink("demo-top", "Accueil",
"", "http://www.franc83.fr/", "l1");
addSubMenu("demo-top", "Outils javascript",
"", "", "tool-sub", "s1");
addSubMenu("demo-top", "Outils CSS", "",
"", "css-sub", "s2");
addSubMenu("demo-top", "Outils Vidéo",
"", "", "video-sub", "s3");
addLink("demo-top", "Contact", "",
"mailto:franc83@free.fr", "l2");
addSubMenu("tool-sub", "Menus java",
"", "", "menu-sub", "");
addLink("tool-sub", "Effets textes", "",
"http://www.franc83.fr/",
"");
addSubMenu("tool-sub", "Prototype js", "",
"","proto-sub", "");
addLink("tool-sub", "Lightbox V2", "",
"http://www.franc83.fr/pages/albidochon/guppy.html",
"");
addLink("css-sub", "Bannières",
"", "http://www.franc83.fr/pages/albidochon/Banniere.htm",
"");
addLink("css-sub", "Menus boutons", "",
"http://www.franc83.fr/&ecran=1",
"");
addLink("css-sub", "Effets Rollover", "",
"http://www.franc83.fr/",
"");
addLink("css-sub", "Les Layers", "",
"http://www.franc83.fr/",
"");
|
La mise en place des liens se fait dans l'avant dernier "",
. Dans le premier block,
addLink et addSubMenu, se posent les liens (l1, l2) et les sous menus
(s1, s2, s3). Ensuite, il suffit de créer
des SubMenu ou des addLink reliés à ces déclarations.
Les réglages pour les déroulants et divers autres réglages
sont dans les fichiers js et css, mais comme la mise en place du menu
est assez délicate, les internautes capables de gérer ces
menus le feront en étudiant le code dans les fichiers js, une explication
ici serait trop longue et ennuyeuse.
credits :
: yxScripts.com
 Citez cet article
|
- 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é.
|
Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved |
Commenter cet article
