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 :
Vous pouvez bien évidemment employer vos propres images, voire ne pas en utiliser du tout et vous contenter des styles CSS.