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

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:

/* 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

Posted in: Menus,zona de blogger