Un accordéon horizontal avec jQuery, en HTML 5 et CSS 3

Un accordéon est une forme différente de présenter un menu à l’internaute.  jQuery intègre d’origine un accordéon vertical (http://jqueryui.com/demos/accordion/) , mais ne propose pas un accordéon horizontal qui pourrait alors remplacer le menu traditionnel en haut de l’application Web.  Quantités de Plugins jQuery peuvent le faire pour vous, mais beaucoup de ces plugins sont des usines à gaz. Ce que nous allons proposer ici est un tutorial jQuery pour écrire un accordéon horizontal simple (certes embelli avec CSS3), qui se contente de faire son boulot et rien d’autre : lorsque l’internaute clique sur le titre d’un sous-menu, l’intégralité de ce sous-menu est affiché et les autres sous-menus sont réduits. A vous de le modifier en fonction de vos besoins.

1- Avant-propos

La page Web que je vous propose est en HTML5, et utilise des fonctionnalités de CSS3. Dans un article à fin pédagogique, il me semble en effet plus utile d’utiliser les dernières technologies disponibles. Cependant, pas d’inquiétudes, la fonctionnalité « accordéon » apportée par jQuery fonctionne toujours quelles que soient les versions de (X)HTML et de CSS que vous utiliserez.

Certains des styles CSS utilisés ici ne fonctionneront donc pas sur Internet Explorer (comme d’habitude), même si l’accordéon fonctionnera. Effacez les styles CSS3 si vous souhaitez l’adapter pour IE et d’autres anciens navigateurs.

2- La page HTML

Le menu accordéon utilise une structure très simple basée sur une liste. Le contenu de chaque panneau est inséré dans un <li>. L’utilisation de la liste permettra plus tard d’ajuster automatiquement le nombre d’éléments du menu en fonction des éléments disponibles grâce à PHP et à une boucle foreach, si nécessaire.

<div id="accordeon">
  <ul>
    <li><a id="current_item"><div class="accordeon-box">Choix n°1</div>
    <div class="texte-presentation"><h2>Lorem ipsum</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>
    </a></li>
    <li><a><div class="accordeon-box">Choix n°2</div>
    <div class="texte-presentation"><p>Voici le contenu de la deuxieme boite</p></div></a></li>
    <li><a><div class="accordeon-box">Choix n°3</div>
   <div class="texte-presentation"><p>Voici le contenu de la troisieme boite</p></div></a></li>
  </ul>
  <p style="clear:both">&nbsp;</p>
</div>

Quelques éléments CSS sont essentiels pour notre menu (je passerai sur les éléments purement décoratifs, vous en apprendrez plus sur eux dans mon article dédié à la présentation des nouveautés utiles de CSS3) :

#accordeon ul li {
 float: left;
 padding: 10px;
 margin-right: 5px;
 background: #FFFFFF;
}

la propriété float :left permet aux blocs de <li> d’être alignés horizontalement, alors que leur comportement normal les empile les un au-dessous des autres.  Une grande partie de la « magie » est effectuée par cette simple propriété.

#accordeon ul li a {
 display: block;
 overflow: hidden;
 height: 175px;
 width: 40px;
 outline: none;
 cursor: pointer;
}

Cette description de l’élément a représente la forme initiale de notre bloc. Dans notre cas, seul un titre situé du côté gauche du bloc apparaît (représenté par la classe .accordeon-box), mais vous pourrez la remplacer par une image ou une animation. Un élément a est par défaut inline, ce qui empêche de lui assigner une hauteur ou une largeur (même si IE accepte dans certains cas qu’on assigne une taille à un élément inline !). Notre but est cependant de définir une largeur de départ de 40 pixels afin de cacher le reste du contenu, d’où l’application de la directive display : block.

De même, par défaut, le contenu d’un élément est affiché même si ce contenu déborde les limites de cet élément. Or, nous limitons ici la largeur initiale de l’élément à 40 pixels pour ne montrer que sa partie gauche. La propriété overflow nous permet de contrôler l’affichage :  hidden indique que tout contenu qui dépasse la taille de l’élément doit être caché.

A noter que la règle #accordeon ul li a s’applique à tous les sous-menus, à l’exception du sous-menu qui est déjà ouvert (et qui donc a une taille beaucoup plus grande). Ce sous-menu déjà ouvert reçoit un id de current. Un id est par défaut unique ; ça tombe bien, car il ne peut y avoir qu’un seul sous-menu d’ouvert dans notre page. Cet id sera par la suite important pour notre script jQuery.

#accordeon ul li .accordeon-box {
 width: 150px;
 height: 20px;
 font-size: 30px;
 position: relative;
 top: 50px;
 left: -55px;
 color: #0AA8F7;
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

Les trois propriétés en gras sont importantes pour notre page. Il s’agit des propriétés CSS3 (dans l’ordre, pour Chrome/Safari, Firefox et Opera) qui permette de transformer un élément. Ici, nous nous en servons pour tourner l’élément verticalement, afin que le texte apparaisse verticalement à gauche. C’est très pratique, même si ce n’est pas exactement nécessaire pour notre accordéon.  Les versions 6,7 et 8 d’Internet Explorer ignorent ces règles (même si je suis sûr qu’il y a un filtre d’IE qui permet de faire une chose équivalente, à creuser pour les passionné(e)s d’IE !). Vous pouvez également remplacer le texte par une image et supprimer ces trois règles si vous voulez avoir une page compatible sur tous les navigateurs.

3 - jQuery

var current = $("#current");

Dans le fichier JavaScript, on utilise d’abord jQuery pour récupérer l’élément ayant l’id current dans la variable current. current désigne le sous-menu qui est présentement développé. Nous assignons ensuite la taille maximum du sous-menu une fois que l’internaute le développe, ainsi que sa taille minimale par défaut. La même taille maximale est également définie dans le fichier css, dans la règle #accordeon #current, parce qu’on veut que le premier sous-menu soit développé par défaut à l’ouverture de la page. Si au contraire vous décidez de cacher le contenu des sous-menus, supprimez cette règle.

$("#accordeon ul li a").click(function(){ ... });

De retour dans le fichier js, nous demandons à jQuery de surveiller les éléments #accordeon ul li a et de déclencher une fonction si un évènement click() est déclenché. En clair, dès que l’internaute clique sur le titre du sous-menu, jQuery déclenchera les animations décrites dans la fonction anonyme donnée en argument à click().

La 2e forme d’animate() (http://api.jquery.com/animate/ ) dans la documentation décrit les paramètres à lui donner afin d’exécuter une animation : .animate( properties, options ). properties désigne la ou les propriété(s) CSS à atteindre. C’est le résultat final de l’animation. Vous indiquez à jQuery quels sont les propriétés CSS que vous désirez atteindre, et jQuery se charge d’effectuer l’animation pour vous, à condition que les valeurs soient numériques (vous pouvez donc utiliser height, width, top, left, right, etc…) ou parmi les valeurs littérales suivants : 'show', 'hide', et 'toggle'. hide cache l’objet (équivalent de display : none), show affiche l’objet (display : block, inline, etc…) et toggle inverse la propriété de l’objet, de manière à l’afficher si il est invisible, ou le cacher s’il est visible. Ici, nous utilisons la propriété width dans les deux utilisations de animate() :

$(current).animate({width: taille_min}

et

$(this).animate({width: taille_max}

La première ligne demande à jQuery d’effectuer une transition jusqu’à ce que la largeur de l’élément current (c'est-à-dire ayant l’id current) se réduise à taille_min (ici 40 pixels). Lorsqu’aucune unité n’est indiquée, jQuery traite les chiffres comme étant des pixels. Si vous désirez utiliser d’autres unités (em, %, pt…), vous devez l’écrire explicitement.

La seconde ligne demande à jQuery d’effectuer une transition jusqu’à ce que la largeur de l’élément this se développe jusqu’à atteindre taille_max (640 pixels). this mérite un article en lui-même (et ça tombe bien, il fera sans doute l’objet d’un autre article), mais dans le contexte de ce script, il désigne l’élément qui a déclenché l’évènement click(), en d’autres termes le sous-menu que l’internaute vient de cliquer.

Les deux lignes animate() utilisent ensuite les mêmes options : queue:false, duration:200.  Si queue est true, l’animation sera mis dans la file d’attente, ce qui est utile lorsqu’on veut que l’élément subisse plusieurs transformations successives. Ainsi par exemple,  si on fait $(’#element’).fadeOut(‘slow’).fadeIn(‘slow’), c’est-à-dire qu’on fait lentement disparaitre l’élément, puis lentement réapparaître, la fonction fadeIn() est implicitement placée en queue. Dans notre cas, il n’y a pas de multiples animations à effectuer, et on applique donc la valeur false à queue. L’option duration désigne la durée de l’animation, en millisecondes.

current = this;

La dernière action du script est de modifier la variable current : jQuery a refermé l’ancien sous-menu ouvert au départ (celui ayant l’id current), et this est le sous-menu qui est actuellement ouvert. current = this met donc à jour current, en le faisant pointer vers le sous-menu actuellement ouvert.

Le résultat de notre menu en accordéon horizontal jQuery :

4 - CSS3

Je développerai plus en profondeur les règles les plus utiles de CSS3 dans un autre article. J'indiquerai juste que l’ajout de règles CSS3 permet de donner une apparence plus sophistiquée à notre menu (bordures arrondies, dégradés, textes ombrés, etc…) sans recourir à des images qui ne feraient qu’alourdir notre page.

Appréciez le résultat final de notre accordéon horizontal enrichi CSS3 :

Visible bien sur dans tous les bons navigateurs.

Le code complet :

accordeon-horizontal.html
accordeon-horizontal.css
accordeon.js