Vous êtes ici : Accueil du blogjQuery » Un menu accordéon (« Accordion effect ») en jQuery

Un menu accordéon (« Accordion effect ») en jQuery

J’ai toujours du mal à faire appel à des solutions comme jQuery UI pour réaliser des effets simples comme la navigation en accordéon. Pourquoi ?

  • Parce que c’est lourd : 19ko de JS dans sa version minifiée quand on ne veut que l’effet accordéon.
  • Parce que ça impose des règles de balisage : le contenu déroulant doit suivre immédiatement le header dans le DOM.
  • Parce que c’est galère à faire évoluer quand on sort des fonctionnalités de base : essayez d’ouvrir plusieurs sections à la fois avec le widget Accordion de jQuery UI.
  • Parce qu’il y a une dépendance des versions et des modules à respecter, au sein même de la librairie, mais aussi entre la librairie et la version de jQuery.

Le plugin accordéon présenté dans cet article s’affranchit des contraintes listées ci-dessus. Il fait le job (plutôt bien), et c’est tout ce qu’on lui demande.

  1. [#] Structure de base
  2. [#] Installation du plugin
  3. [#] Options
  4. [#] Utilisation dérivée : dropdown

Et voici une démo de ce que l’on cherche à obtenir :

Structure de base

Imaginons un menu de navigation à deux niveaux qui aurait la structure suivante :

<ul class="myNav">
	<li class="myNav-item">
		<a class="myNav-item-link" href="#">Category 1</a>
		<ul class="myNav-item-content">
			<li><a href="#">Category 1-1</a></li>
			<li><a href="#">Category 1-2</a></li>
			<li><a href="#">Category 1-3</a></li>
		</ul>
	</li>
	<li class="myNav-item">
		<a class="myNav-item-link" href="#">Category 2</a>
		<ul class="myNav-item-content">
			<li><a href="#">Category 2-1</a></li>
			<li><a href="#">Category 2-2</a></li>
			<li><a href="#">Category 2-3</a></li>
		</ul>
	</li>
</ul>

Un peu de CSS pour mettre en forme :

.myNav { width:200px; background:#333; }
.myNav-item:not(:first-child) { border-top:1px solid #4d4d4d; }
.myNav-item-link { display:block; padding:8px 10px; }
.myNav-item-content { padding:0 20px; padding-bottom:8px; }

Et on obtient quelque chose comme ça :

A noter que le balisage est libre, vous pouvez par exemple utiliser des <div> à la place des <ul> / <li>, et avoir d’avantage de conteneurs pour englober les éléments.

Installation du plugin

On va maintenant ajouter à notre structure les 3 classes CSS qui permettent au script de fonctionner :

  • ui-accordion-trigger sur l’élément qui doit déclencher l’effet,
  • ui-accordion-content sur le contenu à afficher / masquer,
  • ui-accordion-item sur le conteneur des deux éléments précédents
<ul class="myNav">
	<li class="myNav-item ui-accordion-item">
		<a class="myNav-item-link ui-accordion-trigger" href="#">Category 1</a>
		<ul class="myNav-item-content ui-accordion-content">
			<li><a href="#">Category 1-1</a></li>
			<li><a href="#">Category 1-2</a></li>
			<li><a href="#">Category 1-3</a></li>
		</ul>
	</li>
	<!-- [...] -->

Même si l’ajout de ces classes peut s’apparenter à des doublons, il est important (pour des raisons de maintenance) de bien différencier les classes à vocation cosmétique de celles dédiées aux comportements JS.

Cependant, une vision composant de l’élément accordéon peut vous amener à réaliser la mise en forme CSS directement sur ces classes ui-. Sachez que si vous souhaitez vous affranchir ou modifier ces classes, c’est possible.

Il nous reste à ajouter dans notre CSS les deux lignes qui permettent de masquer / afficher les contenus :

.ui-accordion-content { display:none; }
.active > .ui-accordion-content { display:block; }

On récupère notre plugin :

DéveloppementMinifié (1ko)

Et on l’initialise dans le <head> ou en bas de page avant </body> :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.simpleAccordion.min.js"></script>
<script>
	$(document).ready(function() {
		$('.myNav').simpleAccordion();
	});
</script>

Le menu accordéon est dorénavant fonctionnel :

Options

Voici toutes les options disponibles et les valeurs par défaut de notre plugin Accordion :

$('.myNav').simpleAccordion({
	'item'	   : '.ui-accordion-item',
	'trigger'  : '.ui-accordion-trigger',
	'content'  : '.ui-accordion-content',
	'active'   : 'active',
	'autoClose': false,
	'multiOpen': false,
	'speed'    : 300
});
  • item, trigger et content indiquent les classes sur lesquelles le script doit se baser. Par exemple en reprenant la structure précédente, on aurait pu initialiser le script de la façon suivante :

    $('.myNav').simpleAccordion({
    	'item'	   : '.myNav-item',
    	'trigger'  : '.myNav-item-link',
    	'content'  : '.myNav-item-content'
    });
    
  • active correspond à la classe permettant d’identifier un élément accordéon actuellement déroulé. On peut utiliser cette classe pour définir un item initialement ouvert (= au chargement de la page) :

    <li class="myNav-item ui-accordion-item active">
  • autoClose permet la fermeture automatique du menu lorsqu’un clique est détecté n’importe où dans la page (sauf sur notre menu). Cette option est utile lorsqu’il s’agit de mettre en place un effet dropdown.

  • multiOpen, comme son nom l’indique, autorise l’ouverture simultanée de plusieurs sections.

  • speed permet de modifier la vitesse d’ouverture / fermeture des éléments.

L’exemple suivant combine les options vues précédemment, ainsi que l’ouverture de plusieurs éléments au chargement de la page via l’ajout de la classe active :

<ul class="myNav">
	<li class="myNav-item ui-accordion-item active"> ... </li>
	<li class="myNav-item ui-accordion-item active"> ... </li>
	<li class="myNav-item ui-accordion-item active"> ... </li>
</ul>
$('.myNav').simpleAccordion({
	'autoClose': true,
	'multiOpen': true,
	'speed': 150
});

Utilisation dérivée : dropdown

Concrètement, le script ne fait rien d’autre que de gérer l’ouverture et la fermeture d’éléments. Le reste étant géré en CSS, rien ne nous empêche d’étendre le mécanisme à d’autres fonctionnalités, comme par exemple une dropdown :

<div class="ui-dropdown">
	<span class="ui-dropdown-trigger">Dropdown</span>
	<div class="ui-dropdown-content">Lorem ipsum dropdown content</div>
</div>
.ui-dropdown { position:relative; }
.ui-dropdown-content { position:absolute; top:100%; left:0; width:100%; }
$('.ui-dropdown').simpleAccordion({
	'trigger'  : '.ui-dropdown-trigger',
	'content'  : '.ui-dropdown-content',
	'autoClose': true
});
Dropdown
Lorem ipsum dropdown content

Dans cet article je ne fais que survoler tout ce qui touche à la mise en forme CSS des éléments. Si ça intéresse des gens que je rentre dans les détails (flèches de navigation full CSS, rollovers, …), faites-moi signe. ;)

Laisser un commentaire

Balises HTML autorisées dans la rédaction du message :
<strong> <a> <code> <q>

Les champs marqués d'une étoile sont obligatoires.

Current month ye@r day *