Menu bleu Blocs
C'est une jolie «blocs» du menu CSS avec un effet hover accompagnent. Nous avons ajouté quelques modifications de notre propre à la CSS pour créer une largeur de menu dans tous
les navigateurs.
/*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">
#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}
* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}
#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}
#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>
Le code html
<div id="blueblock">
<ul>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">Gif Optimizer</a></li>
<li><a href="votre lien ici">nom de la page </a></li>
<li><a href="votre lien ici">nom de la page </a></li>
</ul>
</div>
0 commentaires:
Enregistrer un commentaire