Half moon menu à onglets.
Nous avons nommé cet onglet CSS menu "Half Moon" basé sur son look. Le menu utilise une image de fond transparente pour chaque élément d'onglet pour créer un bord tout autour. Cette transparence signifie que vous pouvez modifier les couleurs des éléments du menu (comme la couleur hover) juste en changeant les valeurs de couleur CSS dans la feuille de style. Alignement facile est aussi supportée, afin que vous puissiez, par exemple, aligner le centre ou à droite des onglets, si désiré. Nice!
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
Le code css
<style type="text/css">
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
.halfmoon{
margin-bottom: 1em;
}
.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}
.halfmoon li{
display: inline;
margin: 0;
}
.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font-size: 13px;
background: #ECEEEC url(media/tabright.gif) top right no-repeat;
}
.halfmoon li a:visited{
color: black;
}
.halfmoon li a:hover{
background-color: #CDDADA;
color: navy;
}
</style>
Le code html
<div class="halfmoon">
<ul>
<li><a href="votre lien ici">Home</a></li>
<li><a href="votre lien ici">DHTML</a></li>
<li class="selected"><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>
</ul>
</div>
0 commentaires:
Enregistrer un commentaire