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.
La base HTML
Sommaire
Structure (X)HTML
Voici le code de base du menu :
<ul class="navigation">
<li><a href="#" title="Aller à la page 1">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu">
<li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>
<li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>
<li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>
<ul class="subMenu">
<li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>
<li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>
</ul>
</li>
<li><a href="#" title="Aller à la page 4">Item 4</a></li>
</ul>
qu'il faudra bien sûr insérer dans une page HTML complète (par exemple, une page générée par Squelettor).
Remarquez la présence des éléments span dans les éléments de liste qui contiennent des sous-menus, ainsi que les classes utilisées sur ces mêmes éléments et les sous-menus.
Images employées
Les images employées pour ce tutoriels sont celles-ci :
Vous pouvez bien évidemment employer vos propres images, voire ne pas en utiliser du tout et vous contenter des styles CSS.
Passer au chapitre suivant : Le code JavaScript
