Niveau : Confirmé

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

Introduction

Le but de ce tutoriel est de transformer un menu de navigation HTML en un menu "accordéon", c'est-à-dire déroulant, dont les sous-menus s'ouvrent au clic de souris (ou au focus).

Tutoriel par (Développeur web, Verviers (Belgique))
Mis à jour le . 261041 lectures.
Tags : menu, déroulant, javascript, accordéon, menu déroulant, cascade

Sommaire

  1. Introduction
  2. La base HTML
  3. Le code JavaScript
  4. Les styles CSS
  5. Améliorer l'ergonomie
  6. Conclusion

Pour arriver au menu en accordéon, on va bien sûr utiliser JavaScript, en se basant sur la bibliothèque jQuery. Celle-ci va permettre d'arriver assez vite aux fonctionnalités recherchées en écrivant des instructions compactes.

Accordeon

Pour plus de renseignements sur le fonctionnement et les possibilités offertes par jQuery, je vous invite à consulter la documentation en ligne, très utile (mais uniquement en anglais).

La base HTML