Tutoriaux

** N'oublier surtout pas d'insérer la librairie jQuery dans votre page.

<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>

Structure

<ul>
    <li class="green">
        <p><a href="#">Accueil</a></p>
        <p class="subtext">Accueil du site</p>
    </li>
    <li class="yellow">
        <p><a href="#">À propos</a></p>
        <p class="subtext">Plus d'infos</p>
    </li>
    <li class="red">
        <p><a href="http://www.pckult.net/">Site</a></p>
        <p class="subtext">Visitez PcKULT.NET</p>
    </li>
    <li class="blue">
        <p><a href="http://www.pckult.net/tutoriaux/">Tutoriaux</a></p>
        <p class="subtext">tutoriel jQuery</p>
    </li>
    <li class="purple">
        <p><a href="/../">Retour</a></p>
        <p class="subtext">Retour à l'article.</p>
    </li>
</ul>

CSS

ul{
    margin:0;
    padding:0;
}
li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}
a{
    color:#FFF;
    text-decoration:none;
}
p{
    padding:0px 5px;
}
.subtext{
    padding-top:15px;
}

/*Classes des couleurs du menu*/

.green{
    background:#6AA63B;
}
.yellow{
    background:#FBC700;
}
.red{
    background:#D52100;
}
.purple{
    background:#5122B4;
}
.blue{
    background:#0292C0;
}

jQuery

$(document).ready(function(){
    // Lors du survole de la souris sur un élément <li>
    $("li").mouseover(function(){
        $(this).stop().animate(
            {height: '150px'},
            {queue: false,
            duration: 600,
            easing: 'easeOutBounce'
        })
    });
    // Lors de la sortie du curseur en dehors du <li>
    $("li").mouseout(function(){
        $(this).stop().animate(
            {height: '50px'},
            {queue: false,
            duration: 600,
            easing: 'easeOutBounce'
        })
    });
});

Il y a deux actions dans le code précédent. Lorsque la souris survole un élément du menu, cet élément commence à s'animer en s'agrandissant à 150px sur une durée de 0.6 secondes. L'effet easing appliqué est 'easeOutBounce', qui fait rebondir légèrement le bloc à la fin de l'animation ("out"). Lorsque la souris sort du menu, l'élément reprend sa taille d'origine. De plus, la méthode stop() évite les boucles répétées si la souris entre et sort rapidement du menu. Plus de précisions dans cet article pour en empêcher les répétitions d'animations.