FC le menu de navigation II
Ceci est une version inversée du menu original de navigation des FC. Quatre images sont utilisées dans le cadre de son interface, les deux coins arrondis, un diviseur de retrait entre les liens du menu, et une image de fond dégradé allant du menu. Le nom "FC" est prise après notre CodingForums.com site partenaire, qui au moment de l'écriture utilise un menu basé sur ce code
Dans le cas où vous vous demandez, ce menu CSS conserve sa structure même lorsque le texte est redimensionné.
<style type="text/css">
#cfnavbar{
margin: 0;
padding: 0;
}
#cfnavbar ul{
background: url(media/bgpink.gif) bottom center repeat-x;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}
* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}
#cfnavbar ul li{
display: inline;
}
#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/dividerpink.gif) bottom right no-repeat;
}
#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}
#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/leftcornerpink.gif) bottom left no-repeat;
}
#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/rightcornerpink.gif) bottom right no-repeat;
}
#cfnavbar ul li a:hover{
text-decoration: underline;
}
</style>
Le code html:
<div id="cfnavbar">
<ul>
<li><span><a href="votre lien ici" id="leftcorner">Home</a></span></li>
<li><a href="votre lien ici">DHTML</a></li>
<li><a href="votre lien ici">CSS</a></li>
<li><a href="votre lien ici">Forums</a></li>
<li><a href="votre lien ici">Gif Optimizer</a></li>
<li><a href="votre lien ici">Button Maker</a></li>
<li><a href="votre lien ici" id="rightcorner">Contact</a></li>
</ul>
</div>
<br style="clear: left" />
0 commentaires:
Enregistrer un commentaire