Menú horizontal con un pequeño efecto zoom

Menú horizontal con un pequeño efecto zoom

Ya vimos un gran repertorio de menúes para Blogger, ahora vamos a ver uno horizontal con un pequeño efecto zoom. La verdad es que es muy sencillo de hacer, no requiere nada raro y lo vamos a agregar en un gadget html directamente. Primero, como siempre les dejo un ejemplo(pasen el mouse sobre el menú) y luego les explico cómo hacerlo.

    Inicio Rss Facebook Twitter Google+ 

Entonces si les gustó abrimos un gadget HTML / Javascript y colocamos el siguiente código dentro de él.

--------------------------------------------------------------------------

<style>

ul.arrowunderline{

list-style-type:none;

margin:0;

padding:0;

text-align:center;

font-size:16px;

}

ul.arrowunderline li{

display:inline;

margin-right:12px;

}

ul.arrowunderline li a{

position:relative;

color:orange;

padding-bottom:3px;

text-decoration:none;

}

ul.arrowunderline li a:hover{

font-weight:bold;

font-style:italic;

font-size:20px;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

ul.arrowunderline li a:hover:after{

content:'';

width:0;

height:0;

position:absolute;

left:50%;

margin-left:0px;

bottom: 0;

border-width:0px;

border-style:solid;

border-color: transparent transparent red transparent;

}

</style>

<ul class="arrowunderline">

<li><a href="URL del enlace">Inicio</a></li>

<li><a href="URL del enlace">Perfil</a></li>

<li><a href="URL del enlace">Rss</a></li>

<li><a href="URL del enlace">Facebook</a></li>

<li><a href="URL del enlace">Twitter</a></li>

<li><a href="URL del enlace">Google+</a></li>

</ul>

---------------------------------------------------------------------------

Reemplazamos entonces lo que está en rojo por las URL's de los enlaces y también el nombre de las opciones.

También si se fijan en el código les dejé marcado en púrpura el valor de las fuentes. La primera es el valor de la fuente normal y la otra es el valor de la fuente al pasar el mouse sobre la opción.