Ce CSS crée un "3 états" menu vertical sur une liste ordinaire. Quand la souris passe sur le menu, l'élément de menu jusqu'à biseaux. En outre, dans les navigateurs modernes comme Firefox (pas IE6), en cliquant sur le menu crée un effet de dépression alors que la souris est maintenu enfoncé.
L'effet de biseau est sans douleur créée en utilisant le border-style: attribut d'emblée. Il n'est pas nécessaire de manuellement la couleur du 4 frontières de l'élément de menu.
/*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">
.bevelmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
.bevelmenu li a{
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
text-decoration:none;
}
.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}
html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}
</style>
Le code html
<ul class="bevelmenu">
<li><a href="votre lien ici" >votre nom page</a></li>
<li><a href="votre lien ici" >votre nom page</a></li>
<li><a href="votre lien ici" >votre nom page</a></li>
<li><a href="votre lien ici" >votre nom page</a></li>
<li><a href="votre lien ici" >votre nom page</a></li>
<li><a href="votre lien ici" >votre nom page</a></li>
</ul>
0 commentaires:
Enregistrer un commentaire