Un menu jQuery avec rebond
Les fichiers
Nous allons mettre en place un menu utilisant les librairies JavaScript jQuery et easing. Cette dernière librairie permet d'utiliser des effets dynamiques lors de l'utilisation du menu.
Testez la démonstration de ce menu.
Téléchargez les fichiers du script réalisé par Zach Dunn, sur le site de BuildInternet.
L'objectif
Ce script permet de dérouler les menus avec un effet de rebond. Le menu affiche une image d'illustration.
En utilisant un autre menu, le menu déroulé précédemment "remonte" avec un effet de rebond, le menu activé se déroule avec un effet de rebond.
La structure du menu
Le menu est une très classique liste <ul>. Chaque item <li> de cette liste utilise une classe spécifique pour sa mise en forme. Tous les items sont composés d'un paragraphe <p> contenant un lien <a> contenant le texte visible : Home, About... Un deuxième paragraphe est utilisé pour afficher le texte du menu déroulé ainsi que l'image d'illustration : The front page, More info... Chaque deuxième paragraphe utilise la classe .subtext pour sa mise en forme.
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
Les liens externes
La feuille de style
Dans le <head> insérez le lien vers la feuille de style :
<link rel="stylesheet" href="/animated-menu.css"/>
Les fichiers de script
Dans le <head>, vous trouvez le lien vers le fichier jQuery :
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"> </script>
Toujours dans le <head>, vous trouvez le lien vers la librairie JavaScript easing qui contient les effets d'animation utilisés, le rebond, dans ce menu.
<script src="/js/jquery.easing.1.3.js" type="text/javascript"> </script>
Pour info, voilà l'URL de téléchargement de la librairie easing.
Enfin, vous trouvez le lien vers le fichier JavaScript, animated-menu.js, de paramétrage de ce script :
<script src="/animated-menu.js" type="text/javascript"> </script>
Le paramétrage du script
C'est dans le fichier animated-menu.js, que vous pouvez paramétrer le script.
C'est à la ligne 12 que vous pouvez changer la hauteur du menu déroulé. Elle est gérée par le paramètre height qui est a 150 pixels initialement : height:'150px'.
C'est à la ligne 17 que vous pouvez changer la hauteur du menu « refermé ». Elle est de 50 pixels : height:'50px'. Cette hauteur est égale à celle des items <li> de la liste, définie dans les styles CSS.
C'est à la ligne 12 que vous pouvez changer la durée (exprimée en millisecondes) de « descente » du menu et à la ligne 17 pour la « remontée ». C'est le paramètre duration : duration:600.
Toujours aux lignes 12 et 17, vous pouvez changer l'effet d'animation. C'est le paramètre easing qui a comme valeur par défaut easeOutBounce. easing: 'easeOutBounce'.
Vous avez la liste des effets disponibles dans le fichier jquery.easing.1.3.js dans le dossier js et à l'URL du développeur, dans la zone Example.
La feuille de style
Les styles généraux
L'auteur propose une mise en forme du body, avec une famille de polices de caractères (font-family:"Lucida Grande", arial, sans-serif) et un arrière-plan coloré (background:#F3F3F3).
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
La liste pour le menu
Le menu est inséré dans une liste <ul> qui ne comporte ni marge (margin:0), ni remplissage (padding:0).
ul{
margin:0;
padding:0;
}
Les items de la liste
Tous les items <li> de la liste ont une largeur (width:100px) et une hauteur (height:50px) fixée. Cette hauteur correspond bien à ce qui est affiché à l'écran. Ils flottent sur leur gauche (float:left) pour être les uns à côté des autres. Le texte est de couleur clair (color:#191919) et centré (text-align:center). Enfin, les items « déroulés » sont masqués dans la hauteur des 50 pixels, avec l'utilisation de la propriété overflow avec la valeur hidden.
li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
Les liens
Les liens <a> dans les items <li>, sont de couleur blanche (color:#FFF) et sans soulignement (text-decoration:none).
a{
color:#FFF;
text-decoration:none;
}
Les paragraphes des liens
Dans tous les items <li>, nous avons des paragraphes <p>. Ils ont un remplissage différencié : 0 pixel en haut et en bas, et 5 pixels à droite et à gauche.
p{
padding:0px 5px;
}
Les paragraphes des items déroulés
Les items déroulés affichent un texte et une image dans un paragraphe. Ce paragraphe est mis en forme avec la classe .subtext. Il est juste indiqué une marge supérieure de 15 pixels.
.subtext{
padding-top:15px;
}
L'arrière-plan de chaque item
Chaque item <li> déroulé utilise une classe spécifique pour la mise en forme de son arrière-plan. Chaque item à une couleur spécifique (#6AA63B pour le premier) et une image spécifique (green-item-bg.jpg pour le premier), non répétée et positionnée en haut à gauche (url('images/green-item-bg.jpg') top left no-repeat pour le premier).
.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;}
