L'objectif de ce didacticiel est de créer un menu « accordéon », autrement dit un menu qui se déploie et affiche son contenu si l'utilisateur clique sur un item. Nous allons pour cela utiliser un framework Javascript libre, nommé JQuery, dont le but est de simplifier l'utilisation des fonctions Javascript usuelles.
1. Structure du menu
Nous allons commencer comme toujours par poser la structure de notre menu. Ce dernier est constitué, comme bien souvent, d'une liste non numérotée (<ul>), comportant 4 items. Certains d'entre eux contiennent des sous-menus, qui ne s'afficheront qu'après action de l'utilisateur (que l'on définira plus loin). Ce qui nous donne le code suivant :
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li class="gotsubmenu"><a href="#">Ressources</a>
<ul class="submenu">
<li><a href="#">Images</a></li>
<li><a href="#">Vidéos</a></li>
<li><a href="#">Scripts</a></li>
</ul>
</li>
<li class="gotsubmenu"><a href="#">Support</a>
<ul class="submenu">
<li><a href="#">Documentation</a></li>
<li><a href="#">Forum</a></li>
</ul>
</li>
- Accédez à tous les contenus de Connect en illimité
- Découvrez des listes de lecture et des contenus Premium
- Consultez les nouveaux articles en avant-première
