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

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/AVvXsEiVXjoTohkPVkcCRUAWbVel4jFvniReO7zA9u1T17N2tDUGWVoIUEPUU_SAVOPUTdE8NoiDuSodMINlp1uBjwrZJvELoFDarAKrkd7enFEK8YcYie6GvPY47wd3KZGWe8_NH9NicsBYuADZ/") 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/AVvXsEht519rF3Q3kJ8BVeklyfriG2XwI2p0rXFORIFz8hNtHsIO5MuSGfMIZMlkxGRJIcQiZYtftTrB_0wZtr7E-kt2jKP1R9WSTuwTozb8UUo1ehIOoEJD4yM5Rm9trXNc8UORMekj4n-Hl8Wi/") 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/AVvXsEht519rF3Q3kJ8BVeklyfriG2XwI2p0rXFORIFz8hNtHsIO5MuSGfMIZMlkxGRJIcQiZYtftTrB_0wZtr7E-kt2jKP1R9WSTuwTozb8UUo1ehIOoEJD4yM5Rm9trXNc8UORMekj4n-Hl8Wi/") 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) 

Posted in: Menus,zona de blogger