Menú de Navegación Lateral con Efecto Slide jQuery y CSS

http://bloguermast.blogspot.com

Menú de Navegación Lateral con Efecto Slide jQuery y CSS

Este menú en diapositiva, cuya explicación (en inglés) para su creación, encontramos en tympanus.net, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos. Para ponerlo en nuestro blog: 1.- Vamos a Edición de HTML: Página principal ► Diseño ► Edición de HTML ► 2.- Para obtener la librería jQuery v1.3.2 pegamos, antes de la etiqueta </head>, el siguiente código: <script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/> 3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente: <script type="text/javascript"> $(function() { $('#navigation a').stop().animate({'marginLeft':'-85px'},1000); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-2px'},500); }, function () { $('a',$(this)).stop().animate({'marginLeft':'-85px'},500); } ); }); </script> Los números 500 corresponden a la velocidad del efecto slide que, en el caso de la DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida. 4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos 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(http://s7.tinypic.com/1428pag_th.jpg); } ul#navigation .imagen2 a { background-image: url(http://s7.tinypic.com/ke8ax1_th.jpg); } ul#navigation .imagen3 a { background-image: url(http://s7.tinypic.com/r210fl_th.jpg); } ul#navigation .imagen4 a { background-image: url(http://s7.tinypic.com/a4vexe_th.jpg); } ul#navigation .imagen5 a { background-image: url(http://s7.tinypic.com/50ruz7_th.jpg); } ul#navigation .imagen6 a { background-image: url(http://s7.tinypic.com/15qpxj8_th.jpg); } ul#navigation .imagen7 a { background-image: url(http://s7.tinypic.com/2r4lh0z_th.jpg); } Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes. 5.- Vista previa y Guardar plantilla.6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML: <ul id="navigation"> <li class="imagen1"><a href="#" title="descripción"></a></li> <li class="imagen2"><a href="#" title="descripción"></a></li> <li class="imagen3"><a href="#" title="descripción"></a></li> <li class="imagen4"><a href="#" title="descripción"></a></li> <li class="imagen5"><a href="#" title="descripción"></a></li> <li class="imagen6"><a href="#" title="descripción"></a></li> <li class="imagen7"><a href="#" title="descripción"></a></li> </ul> Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.

---

Read more...