Menú lateral flotante con JQuery y CSS

   Hoy me preguntaron como logro el efecto del menú flotante a mano izquierda y la verdad es que de un tiempo para acá nadie me había preguntado sobre esto, por lo que nunca me preocupe en publicar como lograr ese efecto. Hoy mostrare a detalle como conseguirlo, lo primero es el HTML.

<ul id="navigation">
 <li class="Imagen1"><a title="Un titulo"></a></li>
 <li class="Imagen2"><a title="Otro titulo"></a></li>
 <li class="Imagen3"><a title="Podemos quitarlo"></a></li>
</ul>

   ¿Y porque cada elemento se separa por clase? Para trabajarlo de forma mas cómoda y cargar la imagen dentro del CSS, así optimizamos todo el proceso, recordemos que para cada opción debemos tener una nueva clase. Ahora sigue el CSS, pero vamos con lo básico.

   Primero definimos la lista de elementos, es lo esencial.

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}

   Ahora definimos el tamaño.

ul#navigation li {
    width: 100px;
}

   Si quieres que la solapa u opción sea mas grande, entonces estira el tamaño, pero por lo general con '100px' se logra un buen efecto visual. Algunos lo prefieren mas pequeños porque utilizan iconos de menor tamaño, todo depende de que vamos a colocar.

   Luego que tenemos definido todo esto, vamos con los enlaces.

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
}

   Cuidado con el 'margin-left' que esta seteado en negativo a '-85px', esto es porque vamos a dejar unos '15' para que se vea una parte de la solapa, por ejemplo, si utilizamos un tamaño de la lista [ul#navigation li a] de '150px' entonces dejaremos el margen en '-135px', por ejemplo claro esta.

   Con esto ya estamos listos, pero vamos a redondear los bordes y agregar un pequeño efecto de transparencia, esto es para que se aprecie cualquier elemento de fondo y le de un acabado mas estético.

ul#navigation li a {
    display: block;
    margin-left: -85px;
    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;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

   Hasta ahora ya tenemos construido todo, ahora solo falta la imagen de fondo que se utilizará en cada una de las solapas, para continuar con el ejemplo tomamos en cuenta las clases que se utilizan al comienzo de la entrada en el HTML, de modo que la última parte de nuestro CSS queda de la siguiente manera.

ul#navigation .Imagen1 a {
    background-image: url(Imagen1.png);
}
ul#navigation .Imagen2 a {
    background-image: url(Imagen2.png);
}
ul#navigation .Imagen3 a {
    background-image: url(Imagen3.png);
}

   Ahora solo resta la función que hará el efecto, para esto utilizaremos JQuery, el código es el siguiente.

$(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);
    }
  );
});

   Aquí lo que hacemos es simple, cuando se pase el mouse sobre un elemento de la lista, el cambiara los valores de  'margin-left' que definimos anteriormente. Es muy importante tomar en cuenta el tamaño que hemos definido, si vamos a utilizar otro tamaño, también debemos modificarlo en el script para que el efecto sea limpio. Y el resultado lo podemos ver en el blog, de todos modos aquí una imagen.



   Si estamos utilizando otra librería puedes leer la entrada Prototype y JQuery, te será de ayuda para utilizar ambas librerías sin generar conflictos.

8 Comentarios

Escribir Comentario
Anónimo
AUTOR
10 de octubre de 2012, 23:53 delete

Me podrías enviar el ejemplo completo o subirlo por aquí, a mi no me anda, es muy interesante el menú lateral y la verdad me vendría incrible para un proyecto que estoy realizando, mi mail es: sebaloco1@hotmail.com

Muchas gracias!

Responder
avatar
11 de octubre de 2012, 0:22 delete

¿Como estas?... Como verás ya esta todo mas que explicado en la entrada, pero si aún quieres profundizar más puedes ver el código fuente del blog y ver como esta implementado, aunque la explicación del post esta bien completa... Saludos!!

Responder
avatar
Anónimo
AUTOR
24 de noviembre de 2012, 12:24 delete

Genial, Gracias por tus aportes.

Responder
avatar
Julio C
AUTOR
2 de febrero de 2013, 0:53 delete

Hola Carlos, Cómo hago para que en lugar de una imagen contenga texto ?
Saludos y muchas gracias

Responder
avatar
3 de febrero de 2013, 8:59 delete

Dentro de las listas (li) reemplaza los enlaces (a) por textos y elimina la clase "Imagen", luego solo te queda adaptar el CSS según lo requieras...

Responder
avatar
Julio C
AUTOR
12 de febrero de 2013, 2:30 delete

Muchas gracias Carlos, que amable eres !!!

Responder
avatar
10 de octubre de 2013, 12:30 delete

hola, estaba probando el codigo, pero no se como poner el jquery, el efecto que se ve aca, no lo consigo... me caeria bien un poco de ayuda, soy nueco en esto de jquery de nate mano gracias

Responder
avatar
30 de octubre de 2013, 6:11 delete

Lo primero es cargar la librería JQuery justo en nuestro header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Luego, dentro del HTML puedes probar el ejemplo, saludos!!

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon