Menú de texto con jQuery

Esto que vemos es un ejemplo de menú que podemos ver en la última entrada de Codrops el demo de la autora podemos verlo aquí un fantástico trabajo donde se combinan distintas fuentes de Google Font API

Para no complicarnos la vida lo que hice fue utilizar el menú superior omitiendo el resto de fuentes de la demo.

1 En plantilla edición de HTML y antes de ]]></b:skin> añadimos los estilos:

.sl_menu{
 margin:20px 0px 0px 20px; /* ubicamos arriba/derecha/abajo/izquierda */
 list-style:none;
}
.sl_menu li,
.sl_examples{
 float:left;
 font-family: 'Aclonica', serif; /* tipo de fuente, opcional de Google */
 font-size:30px; /* tamaño de fuente */
 line-height:50px;
 color:#333; /* color de barras separadoras */
 margin-right:5px;
 text-transform:uppercase;
}
.sl_menu a,
.sl_examples a{
 display:block;
 position:relative;
 float:left;
 clear:both;
 color:#fff;
}
.sl_menu a > span,
.sl_examples a > span{
 height:50px;
 float:left;
 position:relative;
 overflow:hidden;
}
.sl_menu a span span,
.sl_examples a span span{
 position:absolute;
 display:block;
 left:0px;
 top:0px;
 text-align:center;
}
.sl_menu a span span.sl-w1,
.sl_examples a span span.sl-w1{
 color:#333; /* color de fuente tal y como se muestra */
 text-shadow:0px 0px 1px #fff; /* sombra de texto tal y como se muestra */
 z-index:2;
}
.sl_menu a span span.sl-w2{
 color:#ff516f; /* color de fuente al pasar el cursor */
 text-shadow:0px 1px 2px #99162c; /* sombra de texto al pasar el cursor */
 z-index:3;
}
.sl_examples{
 padding-top:50px;
 margin:20px;
 clear:both;
 display:block;
}
.sl_examples a{
 margin:15px;
}

2 Nos situamos ahora justo después de ]]></b:skin> para añadir jQuery.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya usamos jQuery en nuestro blog no es necesario añadirlo de nuevo y omitimos el paso 2.

3 A continuación pegamos el contenido de este archivo.

4 Por último guardamos los cambios y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadimos:

<ul id="sl_menu" class="sl_menu">
<li><a href="#">Home</a>/</li>

<li><a href="#">Perfil</a>/</li>

<li><a href="#">Contact</a></li>

</ul>

La almohadilla será sustituida por la url que deseamos enlazar.
El texto de Home, Perfil y Contact lo sustituimos por el nuestro, será el texto que se visualiza y hace de enlace.

En los estilos está marcado el lugar donde podemos cambiar el color de los enlaces y la sombra de texto, así como el tamaño, la ubicación y el tipo de fuente.