Menú básico con efecto Hover
Bien este es otro de los tantos menúes que llevamos hecho y uno de los más fáciles y sencillos. No tenemos que andar haciendo nada raro, lo hacemos todo de un sólo tirón incluyendo todo los estilos dentro de un gadget HTML/Javascript directamente. Los invito a apoyar su mouse sobre los enlaces de acá abajo y verán la flechita que aparece debajo de cada enlace. Es apenas un detalle para aquellos que no les gustan las cosas extravagantes.
Bueno entonces para agregar este menú abrimos un gadget HTML/Javascript e insertamos el siguiente código:
<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* puede ser "left", "right" o "center" */
font: bold 18px Georgia; /* tamaño de fuente */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* espacio entre enlaces */
}
ul.arrowunderline li a{ /* el color de texto es black */
position:relative;
color:black;
padding-bottom:8px; /* espacio entre la flecha y el texto */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosor línea de la flecha el color es red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* el color de la flecha es red */
}
</style>
<ul class="arrowunderline">
<li><a href="url-enlace">Enlace 1</a></li>
<li><a href="url-enlace">Enlace 2</a></li>
<li class="selected"><a href="url-enlace">Enlace 3</a></li>
<li><a href="url-enlace">Enlace 4</a></li>
<li><a href="url-enlace">Enlace 5</a></li>
<li><a href="url-enlace">Enlace 6</a></li>
</ul>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* puede ser "left", "right" o "center" */
font: bold 18px Georgia; /* tamaño de fuente */
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* espacio entre enlaces */
}
ul.arrowunderline li a{ /* el color de texto es black */
position:relative;
color:black;
padding-bottom:8px; /* espacio entre la flecha y el texto */
text-decoration:none;
}
ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* grosor línea de la flecha el color es red */
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent red transparent; /* el color de la flecha es red */
}
</style>
<ul class="arrowunderline">
<li><a href="url-enlace">Enlace 1</a></li>
<li><a href="url-enlace">Enlace 2</a></li>
<li class="selected"><a href="url-enlace">Enlace 3</a></li>
<li><a href="url-enlace">Enlace 4</a></li>
<li><a href="url-enlace">Enlace 5</a></li>
<li><a href="url-enlace">Enlace 6</a></li>
</ul>
Listo, ahora simplemente reemplacen las urls de los enlaces y los nombres de las opciones del menú. -------------------------------- asi quedara -----------------------------------
0 comentarios:
Publicar un comentario
muchas gracias por comentar ;)