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.

Recibe notificaciones por correo