Créer rapidement un menu « accordéon » grâce à JQuery

Magazine
Marque
Linux Pratique
Numéro
55
Mois de parution
septembre 2009


Résumé
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.

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>

    

    <li><a href="#">Contacts</a></li>

</ul>

Différence entre une classe et un id

Nous avons en...

Cet article est réservé aux abonnés. Il vous reste 90% à découvrir.
à partir de 21,65€ HT/mois/lecteur pour un accès 5 lecteurs à toute la plateforme
J'en profite