Apuntes de informática

Llevo un tiempo alejado del blog por motivos navideños, pero bueno, hoy te traigo un tutorial sobre cómo personalizar un menú animado usando el plugin Lavalamp.

Conociendo lavalamp:

Lavalamp es un plugin para realizar menús mas llamativos para tu web.
Viene con tres ejemplos, que son los siguientes:

Con imagen:

• Home
• Plant a tree
• Travel
• Ride an elephant

Sin imagen

• Home
• Plant a tree
• Travel
• Ride an elephant

Subrayado

• Home
• Plant a tree
• Travel
• Ride an elephant

Nosotros nos vamos a fijar en el primero, el de la imagen, que es el que utilizaremos para editar.

Preparando el HTML

Si te fijas en el menú que hay en mi web para ganar dinero, entre cada elemento del menú hay un separador, y al pasar el selector por el, desaparece como pasando por debajo, a parte de tener el primer elemento y el último redondeados.
Voy a explicar cómo lo hice, pero primero pongo el código HTML y lo comento:

Comento por lineas, que es mejor:

1. Esto simplemente es el div que engloba todo el menú.
2. Este primer ul es para el lateral izquierdo redondeado, por eso su...
3. ...único li no tiene texto, solo  , que es un espacio en blanco...
4. ...y cierre del ul.
5. Aquí está la "chicha" del menú, como puedes observar, después de abrir el ul...
6. ...lo primero que hay es un li con clase spacer, que no es mas que un separador.
7. Este elemento tiene la clase current que quiere decir que es el elemento sobre el que "descansa" la sombra.
8. Otro spacer.
9. Enlace hacia el blog.
10. Spacer.
11. Enlace hacia el foro.
12. Spacer.
13. Enlace a preguntas frecuentes.
14. Spacer.
15. Último elemento con enlace hacia Contacto.
16. Spacer.
17. Cierre del ul.
18. De aquí en adelante un ul para hacer el  lateral derecho al igual que el izquierdo, y cierre del div.

Ahora que ya tenemos el html, vamos con el CSS...

Dando un poco de estilo con CSS

Como son bastantes selectores, voy a ir comentandolos de uno en uno

El primer elemento es el que hace referencia al menú entero, el div con menu como id

1. Selector.
2. Un ancho excesivo, pero así me aseguro que no se caerá ningún elemento.
3. La altura.
4. Al principio no se muestra, pero se mostrará con JQuery poniéndole un efecto.
5. Margen a 0.

El primer ul del menú

Simplemente se alinea a la izquierda.

Ahora el elemento central del menú

1. Selector.
2. El position relative es necesario para que no haga cosas extrañas la "sombra".
3. La propiedad overflow con el valor hidden hace que cuando algo se vaya a mostrar fuera de su espacio reservado, lo que se escapa no se muestre.
4. El float left es necesario para que no se descuelgue el último ul.

Características generales de ul y li

Ahora vamos a empezar a editar el CSS que afecta a la sombra de LavaLamp

1. Selector dado por LavaLamp.
2. La propiedad z-index se utiliza para traer al frente este elemento, por encima de todos aquellos que tengan un z-index menor a 8.
3. Display block muestra el inicio de la sombra como un elemento que forma parte del bloque.
4. La altura.
5. La imagen de fondo.
6. z-index sólo se aplica a elementos posicionados, asi que toca posicionar este.
7. Le quitamos el borde.

1. Selector dado por LavaLamp.
2. Ponemos la misma imagen que antes, pero ahora si que la repetimos a lo largo del eje x.
3. Mismo display que el elemento anterior.
4. Misma altura.
5. Le quitamos el margen de la izquierda.
6. Le quitamos el borde.

Vamos a por los spacers

Este elemento realmente no tiene mucha explicación, solamente se ponen los bordes laterales, y un z-index de valor 10, que hace que se muestre por encima de la "sombra" y asi parece que pasa "por debajo".
La imagen de fondo no es más que una tira con sombra, que era de una variación que hice del primer diseño, ahora habría que poner algo transparente pero entonces no quedaría tan bien.

Ya casi está todo, vamos con los enlaces del menú

Mencionar solo el atriburo padding, que hace que la zona de click sea mayor, el z-index que hace que se muestren las letras por encima de todo, la alineación centrada y el float left, el resto es, como gustan decir en mi escuela, trivial.

Para terminar, los laterales redondeados

Instalando LavaLamp.

Ahora viene lo más sencillo, como casi todo con JQuery.
Te recomiendo, que le eches un ojo a la introducción a JQuery de este blog, para ir más rápido todavía.

Lo primero que tienes que hacer es descargarte el plugin, si esque no lo has hecho ya, comprimido en un zip, o directamente en *.js, todo desde este enlace, en el cual explican en inglés como funciona.

Ahora, tal como lo explico en la introducción a JQuery, tienes que enlazar los ficheros *.js dentro del head de tu página.

Una vez echo esto, con la siguiente función, activarás el LavaLamp sobre el elemento central del menú:

Y el resultado final... puedes verlo en Sinpastaenelbolsillo.com.