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 :)