voila un exemple vous pouvez modifier le font la couleure < --le css est en francais-->
Flèche Nettoyer Souligné Menu
Ce menu utilise l'astucieux CSS
Triangles technique pour créer un menu UL propre horizontale avec une bordure flèche épaisse appliquée à l'élément de menu actuellement actif. Elle n'utilise pas d'images ni de balisage extranous (grâce à contenu généré CSS ) pour accomplir l'effet, et comme un bonus, le menu peut être facilement alignées "gauche", "centre", ou "droit" sur la page. Cool!
Le code CSS:
<style type="text/css">
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}
ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid purple; /* style of arrow underline */
}
ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
en bas: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent purple transparent; /* create up arrow */
}
</style>
Le code html de vos liens:
<ul class="arrowunderline">
<li><a href="VOTRE LIEN ICI">Home</a></li>
<li><a href="VOTRE LIEN ICI">New</a></li>
<li class="selected"><a href="VOTRE LIEN ICI">Revised</a></li>
<li><a href="VOTRE LIEN ICI">Tools</a></li>
<li><a href="VOTRE LIEN ICI">CSS</a></li>
<li><a href="VOTRE LIEN ICI"">Forums</a></li>
</ul>
voila c'est fait
0 commentaires:
Enregistrer un commentaire