Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Menú lateral flotante con efecto deslizante para el blog

Hace tiempo aprendimos a instalar un menú flotante horizontal con buscador incluido, herramienta que resultaba de mucha utilidad y era muy sencilla de configurar.

Durante varios días estuve investigando los diferentes efectos que se pueden conseguir al hacer uso de JQuery.

El resultado que obtuve fué este elegante menú lateral flotante y deslizante...

Menú lateral flotante con efecto deslizante para el blog


Para ver el menú en funcionamiento, accede a este blog de pruebas.


Diseño>Edición de HTML>expandimos artilugios




Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS justo encima:

ul#blmenudeslizante {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#blmenudeslizante li a {
background:url("http://lh4.ggpht.com/_gjBqKNTws4M/S7DQ32eojgI/AAAAAAAACLw/11KfzbPuqRQ/blmenuds.png") no-repeat scroll 0 0 transparent;
text-align: center;
height:54px;
padding-top: 20%;
padding-left: 4px;
padding-right: 4px;
margin-right:-2px;
width:116px;
display:block;
font-size: 14px;
color: #ffffff;
}
ul#blmenudeslizante li {
width: 100px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 0;
text-indent:-12px;
}
ul#blmenudeslizante li a:hover {
color: #ffffff;
text-decoration: none;
}

Ahora busca la etiqueta </head> y agrega esto encima:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(function() {
$(&#39;#blmenudeslizante a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},1000);

$(&#39;#blmenudeslizante &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},400);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-70px&#39;},400);
}
);
});
</script>

Guarda la plantilla:



Seguidamente añadiremos el código necesario para mostrar los enlaces que componen el menú.


Diseño>añadir gadget (elemento de página)>html-javascript






Pega este código:

<ul id="blmenudeslizante">
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>
</ul>

Reemplaza URL DEL ENLACE por la dirección de tu página web o blog, así como TITULO por el título que llevará el enlace.

En caso de querer añadir más de tres enlaces, pega líneas como esta:

<li class="blink"><a href="URL DEL ENLACE">TITULO</a></li>

Siempre antes de la etiqueta de cierre </ul>.

neuen dice...

es posible que la etiqurtas o botones sean mas grandes que sean mas visibles que se vea el titulo que no quede escondido

Katia dice...

Hola Jaime! muy buen post, para mi que apenas voy comenzando, me has sido de gran ayuda :).
Felicitaciones por tu blog.
Saludos! :)

Jaime Trujillo Escobedo dice...

neuen, ¿no crees que así queda un tanto más atractivo? Pienso que si los títulos permanecen escondidos, a los lectores les hará pensar que es necesario pasar el cursor y entonces... podrán visualizar los enlaces.

Jaime Trujillo Escobedo dice...

Katia, es un gusto poder ayudarte. Gracias por tu comentario ☺.

¡Saludos!

Jose dice...

Esto me ha servido de mucha ayuda.
Queda muy bien en mi blog: http://fibraoptica2.blogspot.com/

Jaime Trujillo Escobedo dice...

Pues te ha quedado de maravilla, Jose. Me alegro de que también hayas podido crear un foro ;).

ALZIRA dice...
Este comentario ha sido eliminado por su autor. Siento las molestias.
Jaime Trujillo Escobedo dice...

Poderse se podría hacer, ALZIRA, pero sería un tanto complicado. Entre otras cosas, habría que cambiar las imágenes del menú (solapas grises) por unas en otra posición y posteriormente cambiar los atributos en el script (por no citar los parámetros que deberían editarse en el CSS).

Si lo deseas podemos intentarlo, haber si conseguimos "trasladarlo a la derecha" ;).

renuevo dice...

este post no me resulto

Jaime Trujillo Escobedo dice...

Renuevo, no has seguido bien los pasos ya que incluiste el CSS en un lugar erróneo.

CARLOSALFRED dice...

Hola que tal muy buen menu a mi me quedo bien en mi blog le cambie el tamaño de la imagen y la separacion , esto lo hice por que tenias muchos submenus y me llenava la poantaya y no cabian todos gracias jaime por tus buenos aportes aca les dejo mi blog pa que vean como quedo

Trovando Solo Para Conocedores

Jaime Trujillo Escobedo dice...

Me encanta el contraste del menú con el fondo de tu blog. Sin duda, navegar por tu blog es comodísimo.

Antoxwoman dice...

:( Jaime, recien descubro tu blog y ya no estas :(

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo