Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje09-06-2011, 16:58 (UTC)    
Título del mensaje: Flecha en vez de subrayados en links

¡Hola!

Aqui les dejo este gran codigo css ...

En vez de que un link de un menu se subraye, aparece abajo de el una flecha que apunta hacia el link.

CSS:
Código:
<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 */ bottom: 0; border-width:5px; /* value should match margin-left above */ border-style:solid; border-color: transparent transparent purple transparent; /* create up arrow */ }  </style>


HTML:
Código:
<ul class="arrowunderline">
<li><a href="http://LINK">Home</a></li>
<li><a href="http://LINK">Home</a></li>
<li><a href="http://LINK">Home</a></li>
<li><a href="http://LINK">Home</a></li>
<li><a href="http://LINK">Home</a></li>
<li><a href="http://LINK">Home</a></li>
</ul>


Vista prev: http://mundo-pgd.es.tl/linkarrow-.-~-.-1.htm#

Fuente: http://www.dynamicdrive.com/style/csslibrary/item/clean_arrow_underline_menu/ <

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
______________
We miss you Cliff Burton :-(


Ultima edición por mundo-pgd el Mie Dic 05, 2012 10:08 pm; editado 5 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group