Menú vertical desplegable de pestañas con jQuery

Este es un menú vertical desplegable que aparece en la parte izquierda del blog, de forma flotante, y que tiene un efecto deslizante al pasar el cursor por cada una se sus pestañas.

Es idóneo para agregar enlaces a las redes sociales o para las páginas del blog, aunque en realidad puede usarse para enlazar a cualquier sitio que queramos.

El ejemplo puede verse en esta misma entrada, en la parte izquierda del navegador, si pasas el cursor sobre él verás cómo se asoma cada pestaña.

Para colocar este menú vertical deslizante en el blog, vamos a usar jQuery, así que recuerda eliminar las versiones repetidas y usar sólo la última versión de jQuery (salvo algunos casos), esto es para evitar que quienes ya usen jQuery no les funcione el menú o cualquier otro gadget que ya use esta librería.

Bien, para empezar entra en la Edición HTML de la plantilla y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
// Menú vertical desplegable de pestañas
jQuery.noConflict();
jQuery(function() {
jQuery('#navigatione a').stop().animate({'marginLeft':'-85px'},1000);
jQuery('#navigatione > li').hover(
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
//]]>
</script>

Ahora antes de ]]></b:skin> pega los estilos del menú:

/* Menú vertical desplegable de pestañas
----------------------------------------------- */
ul#navigatione {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px; /* Distancia de las pestañas desde arriba */
left: 0px;
list-style: none;
z-index:9;
}
ul#navigatione li {
width: 100px; /* Ancho de las pestañas */
}
ul#navigatione li a {
display: block;
margin-left: 0px;
width: 100px; /* Ancho de las pestañas */
height: 70px; /* Alto de las pestañas */
background-color:#d8d8d8; /* Color de fondo de las pestañas*/
background-repeat:no-repeat;
background-position:center center;
border:1px solid #afafaf; /* Color del borde */
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-top-right-radius: 12px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

/* Aquí van las URLs de las imágenes de cada pestaña */
ul#navigatione .imagen1 a{
background-image: url(URL de la imagen UNO);
}
ul#navigatione .imagen2 a {
background-image: url(URL de la imagen DOS);
}
ul#navigatione .imagen3 a {
background-image: url(URL de la imagen TRES);
}
ul#navigatione .imagen4 a {
background-image: url(URL de la imagen CUATRO);
}
ul#navigatione .imagen5 a {
background-image: url(URL de la imagen CINCO);
}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript. Ahí pega este código:

<ul id='navigatione'>
<li class='imagen1'><a href='URL del enlace'/></li>
<li class='imagen2'><a href='URL del enlace'/></li>
<li class='imagen3'><a href='URL del enlace'/></li>
<li class='imagen4'><a href='URL del enlace'/></li>
<li class='imagen5'><a href='URL del enlace'/></li>
</ul>

Este último es la estructura del menú, así que ahí debes colocar las URLs de los enlaces de cada pestaña donde se indica.

En el segundo código verás en color verde algunas áreas que se pueden personalizar como el color de las pestañas y tamaño. En esa misma área verás que se debe colocar las URLs de las imágenes, esos son los íconos que lleva cada pestaña dentro.

Ahí no he puesto una imagen predeterminada para todos pues cada uno deberá elegir el tipo de ícono que quiera usar. Los del ejemplo los he tomado de Iconfinder, pero eso ya es a elección.

Por defecto serán cinco pestañas, pues no es recomendable usar tantas, ya que los usuarios que ingresen al blog con un monitor de pequeña resolución no alcanzarán a ver el resto de las pestañas.

Pero si aun así quisieras agregar más, entonces en el segundo código agrega este fragmento por cada pestaña extra:

ul#navigatione .imagen6 a {
background-image: url(URL de la imagen SEIS);
}

Y en el tercer código esta línea antes de </ul>, también por cada pestaña extra:

<li class='imagen6'><a href='URL del enlace'/></li>

Si te fijas, verás que en ambos códigos extras dice imagen6
Si añades otra más deberás cambiarlo por imagen7 y así sucesivamente.

El script ya está modificado para que sea compatible con Scriptaculous, así que al menos con esa librería no deberá haber problemas. Que lo disfruten :)