Un menu animé avec le plugin jQuery LavaLamp

17 septembre 2010
5 230 vues

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

  • Ramzi Chainbi

    Bonjour,
    le plugin fonctionne correctement sauf que quant en remplace les lien par des lien reel

    l’animation retourne toujours au premier lien

    donc le probleme est quand je click sur un lien animation ne reste pas sur le meme lien, elle retourne au premier lien

    merci

    • http://www.megaptery.com/ Pierre

      Il faut penser à mettre la classe CSS utilisée par le plugin, il me semble « current » par défaut, sur la rubrique courante de ton menu.

  • thiaguteixeira

    J1q Lately I have been lacking in cash and debits were killing me from everywhere! That was Right Until i learned to earn money on the INTERNET. I landed on surveymoneymaker period net, and started doing surveys for money, and yes, i’ve been greatly more able to pay my bills!! i am very glad that I did this!!! – pe2