Menú Horizontal Lavalamp con un bonito Efecto | Creado con CSS y jQuery

Lavalamp es un bonito menú que cuenta con un interesante efecto que pareciera que está creado en flash, pero lo cierto es que está creado con CSS y jQuery. Este efecto fue escrito originalmente por Guillermo Rauch para la librería Mootool, pero gracia a gmarwaha.com podemos disfrutar de este mismo efecto utilizando jQuery.

El efecto funciona con varias librería de jQuery lo he probado con las versiones v1.3.2, v1.4.2 y la verdad es que va perfectamente. Pueden verlo funcionando en mi blog de pruebas.

Para ponerlo en tu blog ve a Diseño > Edicíón de HTML y con la ayuda de (Ctrl + F) busca la etiqueta </head> justo antes pega el siguiente código que corresponde a la librería jQuery 1.3.2:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Para animar el efecto añadiremos el plugin lavalam y el plugin jQuery, para ello copia los siguientes códigos y pégalo justo depués del anterior código que acabas de poner antes de </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.lavalamp.js' type='text/javascript'/>
<!-- Opcional-->
<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.easing.1.1.js' type='text/javascript'/>

<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

Ahora añadiremos la hola de estilo CSS justo antes de la etiqueta ]]></b:skin>, para ello copia el siguiente código:

/* Estilo para el menu Lavalamp */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VPyKnU7WDhPHH03hIrCUFc9mlq1Aqx84C_3UYIbga0g8n6AOPrZtAfduKCmStd08tx78klCBkVmyJjVUXkg7c4OGXXJ8EChnefJ71BG5ULx4F02npKK8VC0ZpAOJul4U2TR2JtHN8A9L/") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* La Fuerza de la lista para el flujo horizontal */
.lavaLamp li {
float: left;
list-style: none;
}
/* Representa el fondo del elemento de menú resaltado. */
.lavaLamp li.back {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzIHT60f1tpv2FT-DWF7TvQw-9tkiz1npKVcOmUARzJp_MWZth53USFX9Tmkq_J4UhivIJ-m7YiNt6V2hi8vrkek7_57NeKODBc-lxdumx7g3HrxDCMyRS_C9SqWwIyERUN0XftSzDLzZk/") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzIHT60f1tpv2FT-DWF7TvQw-9tkiz1npKVcOmUARzJp_MWZth53USFX9Tmkq_J4UhivIJ-m7YiNt6V2hi8vrkek7_57NeKODBc-lxdumx7g3HrxDCMyRS_C9SqWwIyERUN0XftSzDLzZk/") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Estilos para cada elemento de menú. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}

Guarda los cambios, y ve a Diseño > Añadir gadget > elije > HTML/Javascript y pega el siguiente código HTML para llamar a la hoja de estilo y al efecto:

<ul class="lavaLamp">
<li><a href="#">Inicio</a></li>
<li><a href="#">Trucos</a></li>
<li><a href="#">Efectos</a></li>
<li><a href="#">Herramientas</a></li>
</ul>

Ahora mueve el elemento justo debajo de la cabecera. Donde está la # de color verde cámbialo por la dirección de tu enlace.

Nota: tanto la librería jQuery como los script y imágenes la he subido a mi servidor, es recomendable que dichos script y imágenes la suban cada persona a su propio servidor así no te quitan ancho de banda y tu plantilla cargará más rápido.

Descargar Archivos (recomendado)