[Tuto] Du nouveau du côté des menus déroulants

Tandis que le tutoriel actuel concernant les menus déroulants en CSS et Javascript vient d'être déclaré "vieillissant" du fait de ses lacunes et obsolescences, une nouvelle méthode vient d'être publiée par Thomas Dedericks : Créer un menu "accordéon" avec jQuery.

Un menu "accordéon" ? Mais c'est quoi donc ?

C'est une forme de menu déroulant, où les sous-rubriques n'apparaissent qu'au clic de souris sur l'une des rubriques (ou au focus via le clavier). En clair : seuls les rubriques sont affichées au chargement de la page. Lors du clic sur l'une d'elles, elles s'écartent pour laisser place aux sous-rubriques.

Voici un exemple plus parlant.

Thomas nous propose donc un nouveau tutoriel, aboutissant à un menu accordéon qui fonctionne avec les principaux navigateurs du marché, qui reste accessible et logique si JavaScript est désactivé, et utilisable au clavier. Le tout avec une vingtaine de lignes de code JavaScript... et une librairie jQuery.

Ce tutoriel est une alternative vivement conseillée comparée au tutoriel obsolète actuel sur les menus déroulants. Ce dernier va d'ailleurs, à terme, être complètement remodelé pour laisser place à des solutions bien plus propres et accessibles.

Merci Thomas pour cette initiative, tu as bien mérité tes 30 kiwiz ! :D

Par Raphael GOETTER - jeudi 8 novembre 2007 à 17:22

Tutoriels Alsa - #400 - Lu 5701 fois - Intérêt du billet: 2.67(12) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le jeudi 8 novembre 2007 à 17:37, par wildmary :: #

obsolète ? je viens juste de le mettre en place sur 2 sites pour ma boite :(
pourriez-vous nous en dire plus quant à ce qui est obsolète dans l'ancien menu ?

Le jeudi 8 novembre 2007 à 17:41, par Raphael :: site :: #

L'un des principaux problème, également le plus handicapant, est que les menus de ce vieux tuto ne fonctionnent qu'à la souris :(
La navigation au clavier (touche TAB) ne fonctionne pas.

Le jeudi 8 novembre 2007 à 18:29, par lrbabe :: #

Ouais enfin avec jQuery c'est un peu facile les accordéons, il a pas inventé la roue non-plus ce Thomas...

Le jeudi 8 novembre 2007 à 20:39, par Oncle Tom :: site :: #

jQuery UI implémente les accordéons en moins de lignes que ça effectivement. Ce qui est intéressant par le tutorial c'est de démontrer la facilité à crérer un menu accessible et dynamique.

Une remarque toutefois : le sélecteur employé. $(".navigation ul.subMenu") n'est pas vraiment optimisé car il forcera jQuery à récupérer tous les nœuds de la page puis à les filtrer sur une classe navigation. En gros il fait un document.getElementsByTagName('*') alors qu'un sélecteur de type $("#navigation ul.subMenu") applique un document.getElementById() qui va beaucoup plus vite.

A ce moment là faut mieux créer une fonction du genre autoload_accordeon( dom_id ){ $("ul.subMenu", dom_id); ... } et l'appeler autant de fois que l'on ajoute un menu. Ou l'adapter pour ne rechercher que des ul ... mais pas tous les nœuds d'une page.

Le jeudi 8 novembre 2007 à 20:57, par zyegfryed :: #

Très sympa ce menu. La navigation est vraiment intuitive. Bravo !
Seul bémol : 8 avertissements à la validation (HTML Tidy), car les attributs href sont vides. OK je pinaille, c'est au lecteur de renseigner cette partie :)

Le jeudi 8 novembre 2007 à 23:14, par Corinne :: site :: #

@ lrbabe : Je trouve ta remarque un peu facile et surtout blessante.
Pour avoir suivi de loin les nombreux problèmes rencontrés par Thomas pour uniformiser cette proposition sur les différens navigateurs, je peux te le dire : cela n'avait rien d'évident du tout.
Ceci dit, si tu te sens d'attaque pour proposer une version que tu estimes meilleure ou plus adaptée, ne te gêne surtout pas ! Elle sera étudiée avec beaucoup d'attention...
Surtout qu'à te lire, on croirait qu'il n'y a pas plus simple ;)

Le vendredi 9 novembre 2007 à 01:47, par Thomas D. :: #

Salut,

@lrbabe : oui, c'est facile à faire avec jQuery, mais c'est à ça que la librairie sert, non ?

Je suis très loin d'être un cador en JS, et je ne revendique rien de tel, certainement pas "l'invention de la roue". Le but du tutoriel, comme l'a dit Oncle Tom, c'est de montrer comment réaliser des menus sympas à l'usage, avec un code propre et accessible, et de jouer un peu avec les effets & sélecteurs.

Pour les menus déroulants faits à la main, il faut attendre un peu le fruit du travail de Koala64 ... **teasing inside**

@Corinne : c'est Koala qui galère pour le moment, pour moi l'accouchement a été moins douleureux ;)

@Oncle Tom : +1, utiliser un id s'impose pour optimiser les performances. C'est ce que j'avais fait au départ, puis en voulant donner la possibilité de faire plusieurs menus sur la page, j'ai simplement opté pour une classe. Ta méthode serait évidemment plus appropriée (à moins que les menus soient groupés dans un conteneur possédant un id :p)

Le vendredi 9 novembre 2007 à 08:25, par excargot :: #

Il est vrai que des menus déroulants accessibles et bien construits, on peut en trouver des tonnes utilisants différentes libraries (jQuery, moo.fx, etc...).
Mais ce qui est interessant dans le menu de Thomas, c'est justement qu'il propose un vrai tutorial...pas simplement un rar à télécharger. Enfin bref.

Le vendredi 9 novembre 2007 à 10:12, par internautilus :: #

Déjà merci à Thomas pour ce tutoriel.

Deux choses me font hésiter avant de mettre en place ce genre de menu sur un de mes sites.

- Certains ergonomes déconseillent les menus en accordéon car quand un utilisateur clique sur un lien il s'attend à voir apparaître une nouvelle page et pas un sous menu (livre : "Donne -moi ce que je veux")

- Si on adapte cette technique à un menu déroulant classique (horizontal), j'ai l'impression qu'elle ne passe pas le test de désactivation des couleurs

Le vendredi 9 novembre 2007 à 10:53, par Thomas D. :: #

@internautilus : concernant l'ergonomie, et comme me l'a fait remarquer Florent V. lors de la rédaction du tuto, il est important de signaler que certains liens ne font "que" dérouler un sous-menu, par exemple à l'aide d'une icône. Ce n'est d'ailleurs pas seulement valable pour les menus accordéons, mais pour tous les menus déroulants ;)

Pour le test de désactivation des couleurs, je ne vois pas ce qui pose problème ?

Le vendredi 9 novembre 2007 à 12:00, par internautilus :: #

Oui j'avais lu ton tutoriel, il y a un signe distinctif sur les liens qui déroulent un sous-menu.
-Même avec ce signe, d'après mon expérience personnelle (test d'un site d'un concurrent) et ce que j'ai pu lire, les utilisateurs n'ayant que peu l'habitude de l'informatique galère un peu avec ce genre de menu.
Si vous avez d'autres lectures ou d'autres expériences à me faire part je suis preneur.

-Pour ce qui est de la désactivation des couleurs en l'état actuel elle ne pose pas de problèmes. Je me suis dit que peut être que j'adapterais cette technique à un menu horizontal et là le problème de la désactivation des couleurs se poserait.

Le vendredi 9 novembre 2007 à 17:46, par lrbabe :: #

Oui, finalement c'est un excellent tutoriel pour apprendre à faire des menus accessibles et ergonomiques, ça ne se limite pas à jQuery. Je retire donc ce que j'ai dis.

C'est vrai que, pour ce qui est de jQuery, un plugin aurait été plus simple mais il aurait été moins évident d'expliquer pas à pas les raisons des choix fais par l'auteur. Je suppose que c'est aussi pour faciliter la compréhension que l'usage de la chainabilité de jQuery n'est absolument pas utilisé.

Le samedi 10 novembre 2007 à 10:20, par Roms :: site :: #

blog.evaria.com/2007/jque...
...

Le samedi 10 novembre 2007 à 16:45, par Mpok :: #

@Oncle Tom: +1 sur l'optimisation..
J'ai expérimenté un GRAND nombre de scripts de menus déroulants (dont certains étaient considérés comme des références à l'époque, il y a deux ans) et j'ai pu constater que la quasi-totalité des auteurs négligeaient TOTALEMENT l'aspect performance.
En gros, la démo du menu avec 2 niveaux SEMBLE fonctionner, mais dès que l'on veut rajouter un niveau, le menu devient inacceptable avec un "vieux" PC (P III).
(j'ai réalisé l'optimisation d'un de ces scripts, cela a nécessité plusieurs jours et le recours à des "ruses" telles que parcourir les boucles à l'envers...)
Note : mon commentaire n'est pas spécifique au tutoriel en question mais plutôt orienté vers les menus déroulants "classiques", basés sur onMouseOver.

Le dimanche 11 novembre 2007 à 23:16, par Mlle Val :: site :: #

Bonjour,
J'ai lu avec beaucoup d'attention le tutoriel sur le menu accordéon; que j'ai installé sur mon site. Malheureusement je n'arrive pas à faire en sorte que le sous menu reste ouvert après un changement de page...
Je suis ouverte à toute suggestion.
merci d'avance,
Valérie.

Le mercredi 21 novembre 2007 à 16:00, par Kadheus :: site :: #

Très bon tutorial (simple et bien expliqué).
Cependant je tiens à (re)souligner certains problèmes qui relèvent d'un point de vue personnel :

- il faut eviter les l'absence de valeur dans les liens ( href='' ).
- n'aurait-il pas été plus judicieux d'utiliser qu'une seule image pour l'arrière plan et jouer sur sa position ?
- acceder aux éléments a partir de leur CSS n'est pas un moyen performant. Je ne connais pas JQuery mais il doit bien y avoir un moyen de parcourir directement le DOM à partir d'un élément (cf Prototype.js) ?

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.