Menú lateral jQuery con efecto Slide y CSS (hermoso menú)

Hoy día les traigo este menú lateral jQuery con efecto Slide y CSS. Los menú de navegación son una parte vital del blog ya que contiene información importante o no, hoy día hay muchos tipos de menú, pero el que les mostraré hoy día lo podemos utilizar en nuestro blog o página web gracias a Tympanus, que nos enseña a crear un bonito menú de navegación con un bonito efecto slide. Pueden verlo en mi blog de pruebas.

Este menú desplegable casi no se verá ya que permanecerá escondido una parte de los botones hasta que los usuario de tu blog pasen el mouse por encima de cada elemento, cuando pasen el cursor por encima este se desplegará con un bonito efecto slide.

Para ponerlo en tu blog tienes que tener la librería jQuery v1.3.2 en tu plantilla es posible que ya la tengas si es que has puesto otro efecto con esta versión, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería jQuery en nuestra plantilla, ahora toca añadir el script que animará el efecto, para ello copia el siguiente código y pégalo justo después del código que acabas de pegar antes de </head>:

<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>

Ahora toca añadir el código CSS para darle estilo al menú, nuevamente con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:

[+/-] Ver / Ocultar Código

/* CSS menú de Navegación Slide*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .imagen1 a{
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen2 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen3 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen4 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen5 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen6 a {
background-image: url(url-de-tu-imagen);
}
ul#navigation .imagen7 a {
background-image: url(url-de-tu-imagen);
}

Por último tenemos que agregar el código HTML para llamar a la hoja de css y al script, ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código:

<ul id="navigation">
<li class="imagen1"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen2"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen3"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen4"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen5"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen6"><a href="#" title="nombre-imagen"></a></li>
<li class="imagen7"><a href="#" title="nombre-imagen"></a></li>
</ul>

Configuración

Cambia lo que está en color rojo por la dirección de tus iconos.

Donde está la # en color verde tienes que poner la url de tu enlace.

También pueden cambiar la velocidad del efecto slide, esto está en milisegundos, para ello cambien lo que está en color celeste en el código javascript, pueden ver que está en 200 milisegundos.

Descargar Script