Green Arrow menu vertical simple

Green Arrow menu vertical

Green Arrow Menu est un menu liste verticale qui utilise une image de fond unique pour créer trois états distincts, en décalant l'image verticalement pour révéler un style différent. Le dernier état ​​est l'utilisateur appliquée, en donnant à l'élément désiré d'une classe CSS " . sélectionnés ".

*/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 */ 
.arrowgreen{ width: 180px; /*width of menu*/ border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px;}
.arrowgreen ul{ list-style-type: none; margin: 0; padding: 0;} .arrowgreen li a{ font: bold 12px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(media/arrowgreen.gif) 100% 0;  height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/ padding: 4px 0 4px 10px; line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/ text-decoration: none;} .arrowgreen li a:link, .arrowgreen li a:visited { color: #5E7830;}
.arrowgreen li a:hover{ color: #26370A; background-position: 100% -32px;}
.arrowgreen li a.selected{ color: #26370A; background-position: 100% -64px;}
</style>

Remarque: Le chemin de l'image référencée dans le CSS ci-dessus présume 
que vous utilisez la première image verte.
 Si vous utilisez le second, n'oubliez pas de mettre à jour le
 chemin de l'image en conséquence


Le code html

<div class="arrowgreen">

<ul>

<li><a href="votre lien ici title="Home">Home</a></li>

<li><a href="votre lien ici" class="selected" title="CSS">CSS Library</a></li>

<li><a href="votre lien ici" title="Whois">DD Whois</a></li>

<li><a href="votre lien ici" title="Forums">Forums</a></li>

<li><a href="votre lien ici" title="Tools">Webmaster Tools</a></li>

<li><a href="votre lien ici" title="JavaScript">JavaScript</a></li>

</ul>

</div>

Posted in: blogger html css menu verticale