Créer un menu animé fluide avec jQuery

Date de publication : 24 janvier 2009

Par Zach Dunn (Auteur)
 Didier Mouronval (Traducteur)
 

Cet article est la traduction de l'article : How to Make a Smooth Animated Menu with jQuery. Retrouvez toutes les traductions de Build Internet disponibles sur http://buildinternet.developpez.com/.
Avez-vous déjà vu de remarquables menus animés avec jQuery (en quelques exemples ici) qui vous donnent envie de créer le votre ? Nous allons en réaliser un en l'animant avec des effets fluides. 6 commentaires Donner une note à l'article (5)

               Version PDF (Miroir)   Version hors-ligne (Miroir)

L'objectif - Un menu animé
Introduction - Une explication du terme easing
Etape 1 - Mettre en place la structure
Etape 2 - Les styles CSS
Etape 3 - Animer avec jQuery
Etape 4 - Ajouter votre touche personnelle
Démo et téléchargement
Remerciements


L'objectif - Un menu animé

Voici une démo du résultat final.


Introduction - Une explication du terme easing

Notre menu est animé de façon particulièrement fluide grâce à un procédé appelé easing. La définition du site Adobe en Flash Developer Center est assez complète :

“The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.”
"Le terme "easing" se rapporte à l'accélération ou la décélération graduelle, durant une animation, qui permet de rendre vos animations plus réalistes. Easing crée une accélération ou une décélération d'apparence plus naturelle en ajustant graduellement le taux de modification."

Merci pour la qualité du plugin jQuery Easing, qui permet de créer de telles animations sans passer par les environnements Flash et Actionscript.


Etape 1 - Mettre en place la structure

Avant de commencer à utiliser jQuery, nous devons créer la structure XHTML du menu et la placer dans les fichiers de notre projet. Créer de nouveaux documents XHTML, CSS et JavaScript. J'ai choisi de nommer mes fichiers "animated-menu". Créer deux dossiers pour les images et les scripts à la racine. Voici la structure de notre exemple :

Structure des fichiers
Rien d'extraordinaire dans cette structure. Commencez par charger les fichiers nécessaires dans l'en-tête de la page, entre les balises head. J'ai choisi de charger jQuery depuis la page Google code en ligne, alors que le plugin easing est placé dans le dossier 'js'.

warning L'ordre d'appel des scripts est important ! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Menu anim&eacute; fluide avec jQuery</title>
    <link type="text/css" rel="stylesheet" href="animated-menu.css"/>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="animated-menu.js" type="text/javascript"></script>
</head>
Ensuite, copiez la structure du menu dans le corps de la page entre les balises body : 

<body>
    <p>Survolez le menu pour le voir s'animer.</p>
    <ul>
        <li class="green">
            <p><a href="#">Accueil</a></p>
            <p class="subtext">Accueil du site</p>
        </li>
        <li class="yellow">
            <p><a href="#">A propos</a></p>
            <p class="subtext">Plus d'infos</p>
        </li>
        <li class="red">
            <p><a href="http://www.developpez.com/">Site</a></p>
            <p class="subtext">Visitez developpez</p>
        </li>
        <li class="blue">
            <p><a href="http://www.developpez.net/forums/f1188/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/">Forum</a></p>
            <p class="subtext">jQuery sur developpez</p>
        </li>
        <li class="purple">
            <p><a href="../">Retour</a></p>
            <p class="subtext">Retour &agrave; l'article.</p>
        </li>
    </ul>
</body>
</html>
Les éléments du menu ont des classes CSS désignant la couleur du bloc. Dans chaque bloc de menu, nous trouvons un titre et un sous-titre qui sera masqué par défaut.


Etape 2 - Les styles CSS

Maintenant que la structure du menu est en place, nous allons ajouter des styles de base pour l'embellir et le disposer horizontalement. Chaque élément de la liste doit avoir la propriété overflow fixée à hidden, afin que les sous-titres ne soient pas visibles tant que la hauteur ne sera pas ajustée. 

body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}
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;
}

Etape 3 - Animer avec jQuery

Tout notre code jQuery sera dans le fichier JavaScript animated-menu.js créé précédemment. 

$(document).ready(function(){
    //Lorsque la souris survole un lien
    $("li").mouseover(function(){
        $(this).stop().animate(
            {height: '150px'},
            {queue: false,
            duration: 600,
            easing: 'easeOutBounce'
        })
    });
    //Lorsque la souris quitte le lien
    $("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.

Si vous utilisez ce menu dans le contexte d'un site plus grand, vous pouvez juste remplacer les éléments sélectionnés pour l'animation (ici, juste les éléments HTML <li>) par ceux que vous souhaitez (voir ce tutoriel sur la sélection d'éléments avec jQuery).

La méthode stop() est appelée avant le début de l'animation pour éviter des 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.


Etape 4 - Ajouter votre touche personnelle

J'ai ajouté des images de fond dans les exemples pour vous montrer une possibilité de personnalisation et de design. Il existe de nombreuses façons pour créer des menus originaux. A vous d'user de votre imagination pour réaliser celui qui vous correspond. N'hésitez surtout pas à nous faire découvrir vos créations !


Démo et téléchargement

Vous pouvez voir un exemple en ligne.
Téléchargez src l'archive de l'exemple.


Remerciements

Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © Zach Dunn. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum JavaScript

Blogs

Hébergement

 
Partenaires

Hébergement Web