SummArg | Cursos y recursos para webmasters

02/12/2010

Menu animado LavaLamp en jQuery con diferentes estilos gráficos

El efecto de menu LavaLamp fue originalmente escrito para Mootools, pero en esta oportunidad les queremos mostrar la versión escrita para jQuery por Ganesh que ya tiene varias versiones de avance y pesa solo 700 bytes.

Pueden ver un tutorial completo utilizando la última versión del plugin o directamente visitar la página de demos para darse una idea de lo que se puede lograr. Las librerías para descargar aquí son las mas actualizadas.

Implementar el menu

El marcado HTML es sencillo

<ul class="lavaLamp">
 <li><a href="#">Inicio</a></li>
 <li><a href="#">Sobre mi</a></li>
 <li><a href="#">Servicios</a></li>
 <li><a href="#">Contacto</a></li>
</ul>

El CSS debe contener:

.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("../image/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("../image/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .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;
        }
        

Y finalmente, pero no menos importante, entre etiquetas <head> del HTML se debe colocar:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<!-- Opcional -->
<script type="text/javascript" src="path/to/jquery.easing.js"></script>
<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

Obviamente cuidando que las rutas de los archivos .js sean los correctos en relación a la estructura de nuestro website. Pueden probar diferentes variaciones jugando con el CSS o bien utilizando los que ofrecen en este link.

Para el caso de que deseen utilizar este menu lavaLamp con WordPress se recomienda utilizar la versión mas reciente de los scripts y si la versión de jQuery no es la necesaria en nuestra plataforma se puede utilizar una hosteada en Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.lavalamp.1.3.3-min.js"></script>
<script type="text/javascript">
 var query = new Object();
 window.location.search.replace(
 new RegExp( "([^?=&]+)(=([^&]*))?", 'g' ),
 function( $0, $1, $2, $3 ){
 query[ $1 ] = $3;
 }
 );
 easing = query['e'] || 'Expo';
 function loadEasing(e) {
 location.href = location.pathname+'?e='+e;
 }
 function setEasing(e) {
 loadLamps(e);
 }
// for dynamic easing changes        
 function loadLamps(easing) {
 $('#lavaLampBasicImage').lavaLamp({
 fx: 'easeIn'+easing,
 speed: 800,
 homeTop:-1,
 homeLeft:-1
 });
// jquery initialize:
 $(function() {
 $('#menu').lavaLamp({fx: 'swing', speed: 333});
 loadLamps(easing);
 $('select#easing option[value='+easing+']').attr('selected','selected');
 $('.easingLabel').text(easing);
 });
//console.log();
-->
</script>

Dejar un comentario

  1. Hola una consulta, como puedo hacer para que la barra que se mueve inicie desde un determinado boton y no desde el boton 1?.
    Gracias.

Dejar un comentario