Niveau Niveau confirmé

Créer un menu déroulant “accordéon” avec jQuery

Tutorieljavascript

Publié par le , mis à jour le (251362 lectures)

javascript

La base HTML

La base HTML

Structure (X)HTML

Voici le code de base du menu :

<ul class="navigation">
  <li><a href="#" title="Aller à la page 1">Page 1</a></li>
  <li class="toggleSubMenu"><span>Page 2</span>
    <ul class="subMenu">
      <li><a href="#" title="Aller à la page 2.1">Page 2.1</a></li>
      <li><a href="#" title="Aller à la page 2.2">Page 2.2</a></li>
      <li><a href="#" title="Aller à la page 2.3">Page 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">Page 3.1</a></li>
        <li><a href="#" title="Aller à la page 3.2">Page 3.2</a></li>
      </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Page 4</a></li>
</ul>

Il faudra bien sûr l'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 tutoriel sont celles-ci :

item de menu normal

item de menu enroulé

item de menu déroulé

Vous pouvez bien évidemment employer vos propres images, voire ne pas en utiliser du tout et vous contenter des styles CSS.