Créer un menu "accordéon" avec jQuery
Le 07-11-2007 par Collectif Alsacreations dans Tutoriels JavaScript.
Le but de ce tutoriel est de transformer le menu HTML du chapitre suivant en un menu "accordéon". Un menu "accordéon" est un menu déroulant un peu particulier, dont les sous-menus s'ouvrent au clic de souris (ou au focus).
Pour cela, on va bien sûr utiliser JavaScript, mais en se basant sur la bibliothèque jQuery. J'ai utilisé la version 1.2.1 de jQuery, la plus récente au moment d'écrire ces lignes.
Conclusion
Sommaire
Le menu n'est pas vraiment terminé. Il reste quelques améliorations faciles à apporter, notamment en utilisant la méthode des portes coulissantes pour les effets de survol CSS au lieu d'images séparées (ou en préchargeant les images via JavaScript). Mais vous trouverez les techniques nécessaires dans d'autre tutoriaux, et pas très loin d'ici.
Récapitulons : nous avons réalisé un menu accordéon qui fonctionne avec les principaux navigateurs du marché, qui reste accessible et logique si JavaScript est désactivé, et utilisable au clavier. Le tout avec, si je compte bien, une vingtaine de lignes de code JavaScript. Pas mal !
La bibliothèque jQuery offre bien d'autres possibilités. Je vous invite à explorer un peu son fonctionnement, en changeant l'effet utilisé pour afficher les sous-menus, la vitesse, etc. Amusez-vous ...
Le principal inconvénient des bibliothèques JavaScript est (était ?) leur poids souvent excessif. À vous de voir si les 27 ko de jQuery valent la peine ou pas ...
Article rédigé par Thomas Dedericks, soumis à licence Creative Commons "by" : vous devez citer le nom de l'auteur original et mentionner la source (URL) de l'article.
