Menú lateral con CSS y Jquery para Blogger

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 Editar HTML: Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Para obtener la librería jQuery localizamos la etiqueta </head>, poníéndola dentro del rectángulo de búsqueda (Search), y pegamos, entes de la misma, el siguiente código: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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> -85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra. Los números 500 corresponden a la velocidad del efecto slide que, en el caso del 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. Twittear Índice: Menús Menú de navegación lateral con efecto slide Menú horizontal dinámico, con submenús Menú horizontal desplegable con Ajax Menú vertical con CSS y jquery, efecto acordeón Menú Horizontal desplegable con jQuery, CSS3 y Efecto deslizante Menú horizontal desplegable con CSS y Jquery Menú Horizontal Estilo Apple Fancy con Efecto Slide, CSS y Jquery Menú vertical desplegable