{"id":1589,"date":"2011-10-30T17:50:26","date_gmt":"2011-10-30T16:50:26","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=1589"},"modified":"2015-01-18T16:22:04","modified_gmt":"2015-01-18T15:22:04","slug":"mise-a-jour-plugin-jquery-menu-deroulant","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/mise-a-jour-plugin-jquery-menu-deroulant","title":{"rendered":"[Mise \u00e0 jour] Plugin jQuery menu d\u00e9roulant v.1.5"},"content":{"rendered":"

Si vous \u00eates un habitu\u00e9 du blog, vous avez certainement d\u00e9j\u00e0 vu passer l’information sur ce plugin.
\nLa mise \u00e0 jour a \u00e9t\u00e9 effectu\u00e9e en d\u00e9but de semaine, mais je n’ai pas eu le temps de faire l’actu avant.<\/p>\n

(Re)d\u00e9couverte<\/h2>\n

Pour ceux qui ne connaitraient pas le plugin Juiz DropDown Menu<\/a>, il s’agit d’un outil permettant de passer d’une simple liste imbriqu\u00e9e \u00e0 un menu d\u00e9roulant fonctionnel \u00e0 la souris et \u00e0 la tabulation clavier.<\/p>\n

Rappels des fonctionnalit\u00e9s<\/h2>\n

Ce plugin utilise jQuery, il s’agit d’une extension de la biblioth\u00e8que utilisant initialement un simple fichier .js<\/abbr>.
\nAfin de styler ce menu le dossier du plugin contient un fichier CSS (pour lequel vous pouvez tr\u00e8s bien ajouter son contenu \u00e0 votre propre CSS), quelques fichiers d’images, et un fichier JavaScript.<\/p>\n

Le passage de la souris sur un lien permet l’affichage anim\u00e9 (animation param\u00e9trable) d’un sous-menu.
\nL’ouverture d’un autre sous-menu replis les sous-menus d\u00e9j\u00e0 ouvert.
\nSi on quitte le menu tous les sous-menus disparaissent. <\/p>\n

L’utilisation de la navigation clavier \u00e0 la touche tabulation est support\u00e9e.
\nElle permet de passer d’un lien \u00e0 l’autre tout en affichant les sous-menus. L’ordre d’affichage est bien en fonction de l’ordre du DOM<\/abbr>.
\nLa \u00ab\u00a0tabulation inverse\u00a0\u00bb permet d’afficher le contenu des sous-menus sans forc\u00e9ment avoir besoin de tout re-parcourir.<\/p>\n

Nouvelles fonctionnalit\u00e9s<\/h2>\n

\"\"D\u00e9sormais le plugin prend en charge un nouveau niveau de sous-menu.
\nJe ne suis pas sp\u00e9cialement fan ce type de sous-sous-menu, dans le sens o\u00f9 parfois c’est un peu trop, mais la fonctionnalit\u00e9 m’a \u00e9t\u00e9 demand\u00e9e et le d\u00e9fi me semblait int\u00e9ressant.
\nLibre \u00e0 vous de l’utiliser ou pas \ud83d\ude42
\nNulle crainte, il n’y aura pas de niveau suppl\u00e9mentaire \u00e0 l’avenir.<\/p>\n

\"Fl\u00e8chesPour d\u00e9tecter plus facilement la pr\u00e9sence de sous-menus, de nouvelles classes CSS font leur apparition et sont d\u00e9j\u00e0 exploit\u00e9es par la CSS fournies. De petites fl\u00e8ches viennent donc d\u00e9corer les liens cachant des sous-menus.
\nIl vous est possible de personnaliser l’aspect de ces \u00e9l\u00e9ments.<\/p>\n

\"\"Une nouveaut\u00e9 \u00e9galement, l’aspect \u00ab\u00a0responsive<\/abbr>\u00a0\u00bb qui permet d’avoir un affichage optimis\u00e9 sur SmartPhone, \u00e0 condition d’avoir fait le n\u00e9cessaire au pr\u00e9alable sur votre interface, bien entendu. Cet aspect est directement pr\u00e9sent dans la feuille de style, la r\u00e8gle @media<\/code> et les d\u00e9clarations qui suivent vous permettront de les personnaliser en cas de besoin.<\/p>\n

Quelques limites<\/h2>\n
    \n
  • Le support d’IE6 a \u00e9t\u00e9 abandonn\u00e9 dans le sens o\u00f9 le plugin n’a pas \u00e9t\u00e9 test\u00e9 sur ce navigateur.<\/li>\n
  • Un bogue existe \u00e0 la navigation clavier, lorsque l’on parcours les sous-sous-menus, ceux-ci ont tendance \u00e0 disparaitre\/r\u00e9apparaitre.<\/li>\n
  • Le menu en mode \u00ab\u00a0responsive<\/abbr>\u00a0\u00bb planque les sous-sous-menus, \u00e0 vous de pr\u00e9voir l’utilisation de pages interm\u00e9diaires (\u00e7a devrait de toute mani\u00e8re \u00eatre d\u00e9j\u00e0 le cas… non ? :p)<\/li>\n<\/ul>\n

    Voili voilo\u00f9 !
    \nSi jamais vous avez des suggestions, je suis \u00e0 vous !<\/p>\n","protected":false},"excerpt":{"rendered":"

    Si vous \u00eates un habitu\u00e9 du blog, vous avez certainement d\u00e9j\u00e0 vu passer l’information sur ce plugin. La mise \u00e0 jour a \u00e9t\u00e9 effectu\u00e9e en d\u00e9but de semaine, mais je n’ai pas eu le temps de faire l’actu avant.<\/p>\n","protected":false},"author":4,"featured_media":1277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,610,50],"tags":[85,155,158,159,52,157,51,403],"coauthors":[597],"class_list":["post-1589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-javascript","category-ressources-telechargements","tag-accessibilite","tag-clavier","tag-deroulant","tag-dropdown","tag-jquery","tag-menu","tag-plugin","tag-responsive"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=1589"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/1589\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/1277"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=1589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=1589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=1589"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=1589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}