Si vous êtes un habitué du blog, vous avez certainement déjà vu passer l’information sur ce plugin.
La mise à jour a été effectuée en début de semaine, mais je n’ai pas eu le temps de faire l’actu avant.

(Re)découverte

Pour ceux qui ne connaitraient pas le plugin Juiz DropDown Menu, il s’agit d’un outil permettant de passer d’une simple liste imbriquée à un menu déroulant fonctionnel à la souris et à la tabulation clavier.

Rappels des fonctionnalités

Ce plugin utilise jQuery, il s’agit d’une extension de la bibliothèque utilisant initialement un simple fichier .js.
Afin de styler ce menu le dossier du plugin contient un fichier CSS (pour lequel vous pouvez très bien ajouter son contenu à votre propre CSS), quelques fichiers d’images, et un fichier JavaScript.

Le passage de la souris sur un lien permet l’affichage animé (animation paramétrable) d’un sous-menu.
L’ouverture d’un autre sous-menu replis les sous-menus déjà ouvert.
Si on quitte le menu tous les sous-menus disparaissent.

L’utilisation de la navigation clavier à la touche tabulation est supportée.
Elle permet de passer d’un lien à l’autre tout en affichant les sous-menus. L’ordre d’affichage est bien en fonction de l’ordre du DOM.
La « tabulation inverse » permet d’afficher le contenu des sous-menus sans forcément avoir besoin de tout re-parcourir.

Nouvelles fonctionnalités

Désormais le plugin prend en charge un nouveau niveau de sous-menu.
Je ne suis pas spécialement fan ce type de sous-sous-menu, dans le sens où parfois c’est un peu trop, mais la fonctionnalité m’a été demandée et le défi me semblait intéressant.
Libre à vous de l’utiliser ou pas 🙂
Nulle crainte, il n’y aura pas de niveau supplémentaire à l’avenir.

Flèches présentant les sous-menusPour détecter plus facilement la présence de sous-menus, de nouvelles classes CSS font leur apparition et sont déjà exploitées par la CSS fournies. De petites flèches viennent donc décorer les liens cachant des sous-menus.
Il vous est possible de personnaliser l’aspect de ces éléments.

Une nouveauté également, l’aspect « responsive » qui permet d’avoir un affichage optimisé sur SmartPhone, à condition d’avoir fait le nécessaire au préalable sur votre interface, bien entendu. Cet aspect est directement présent dans la feuille de style, la règle @media et les déclarations qui suivent vous permettront de les personnaliser en cas de besoin.

Quelques limites

  • Le support d’IE6 a été abandonné dans le sens où le plugin n’a pas été testé sur ce navigateur.
  • Un bogue existe à la navigation clavier, lorsque l’on parcours les sous-sous-menus, ceux-ci ont tendance à disparaitre/réapparaitre.
  • Le menu en mode « responsive » planque les sous-sous-menus, à vous de prévoir l’utilisation de pages intermédiaires (ça devrait de toute manière être déjà le cas… non ? :p)

Voili voiloù !
Si jamais vous avez des suggestions, je suis à vous !