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.
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 la librairie jQuery.
Ce tutoriel est une alternative vivement conseillée comparée au tutoriel obsolète 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
Commentaires
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 ?
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.
Ouais enfin avec jQuery c'est un peu facile les accordéons, il a pas inventé la roue non-plus ce Thomas...
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.
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 :)
@ 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 ;)
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)
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.
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
@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 ?
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.
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é.
blog.evaria.com/2007/jque...
...
@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.
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.
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) ?