Barre de menu Chrome
Ceci est un poids léger "chrome" barre de menu de recherche CSS. Le menu utilise deux variantes de l'image de fond de même pour créer l'effet de survol. L'image de fond d'abord appliqué à la barre de menu tout entier, tandis que le second arborant une couleur différente est appliquée uniquement lorsque la souris passe sur un des liens du menu. Les éléments du menu peuvent être facilement réglé soit d'aligner la «gauche», «centre», ou «droit» sur la page, juste en changeant le "text-align" attribut.
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">
#chromemenu{
width: 99%;
font-weight: bold;
font-size: 90%;
}
#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(media/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
#chromemenu ul li a:hover{
background: url(media/chromebg2.gif) center center repeat-x;
}
</style>
Le code html
<div id="chromemenu">
<ul>
<li><a href="votre lien ici">Dynamic Drive</a></li>
<li><a href="votre lien ici">CSS Library</a></li>
<li><a href="votre lien ici">CSS Drive</a></li>
<li><a href="votre lien ici">Gif Optimizer</a></li>
<li><a href="votre lien ici">Favicon Creator</a></li>
<li><a href="votre lien ici">Button Maker</a></li>
</ul>
</div>
0 commentaires:
Enregistrer un commentaire