Un menu animé avec le plugin jQuery LavaLamp

17 septembre 2010

LavaLamp est un plugin jQuery qui permet de créer un menu animé qui s’inspire du mouvement des boules de cire d’une lampe à lave. Très bonne alternative au Flash, ce menu innovant apporte une nouvelle manière de capter l’attention.

Présentation de LavaLamp


LavaLamp se compose de trois parties distinctes :

  • un balisage HTML sémantiquement correct
  • une feuille de style pour personnaliser l’affichage
  • un script jQuery pour l’animation

La partie HTML

La structure HTML de votre menu doit être définie de la manière suivante : une liste à puces avec une classe CSS.

<ul class="lavaLamp">
   <li><a href="#">Home</a></li>
   <li><a href="#">Plant a tree</a></li>
   <li><a href="#">Travel</a></li>
   <li><a href="#">Ride an elephant</a></li>
</ul>

La balise « ul » représente le menu, et chaque « li » représente une rubrique du menu. LavaLamp va ajouter une autre « li » artificielle pour afficher l’effet de surbrillance sur la rubrique qui correspond. Vous ne devez pas l’ajouter, c’est le plugin qui va s’en charger.

<li class="back"><div class="left"></div></li>

La partie CSS

Vous pouvez personnaliser l’affichage avec de nombreuses façons différentes pour réaliser votre propre menu personnalisé. Vous pouvez utiliser la feuille de style fournie avec le plugin qui est très bien faite et qui permet d’avoir le choix sur l’effet de surbrillance : utiliser soit une image via un sprite CSS, soit du pure CSS. Voici le code CSS pour l’utilisation du sprite CSS avec l’image « bg.gif ».

.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("../image/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        .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;
            }
        .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;
        }

La partie JavaScript

$(function() {
   $(".lavaLamp").lavaLamp({
      fx: "backout",
      speed: 700
   });
});

Si vous téléchargez le plugin, pensez à supprimer la ligne suivante (ou faire un « return true ») pour que le clic soit pris en compte :

click: function(event, menuItem) { return false; }

Pour obtenir une animation fluide et réaliste, il est fortement conseillé d’utiliser les fonctions « easing » du plugin jQuery Easing, sans quoi LavaLamp perd en qualité !

Requis : jQuery + jQuery Easing
Démonstration : http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
Licence : libre

Commentaires