Accueil > Navigation > Menus réactifs > Menu Accordéon > Menu accordéon 2

Menu accordéon 2

15 mars 2011 – par Maïeul – 80

5 votes

Le plugin Menu accordéon n’est plus maintenu.

Voici une nouvelle version, basée sur le principe de la séparation du contenu, de la forme et de l’animation.

Principe

Le précédent plugin mélangeait deux choses :
- le contenu du menu
- l’effet accordéon qui y était associé, c’est à dire la présentation « en tiroir ».

Cette nouvelle version du plugin s’occupe uniquement de l’effet accordéon. Il ne s’occupe pas du contenu de ce menu. Le travail peut-être délégué au plugin Menus ou à une noisette Aveline par exemple ou même géré indépendamment en squelette. Il suffira de donner au ul principal du menu la classe accordeon ou bien de remplir le champ par votre class ou votre identifiant dans la configuration du plugin (ajout du 14 aout 2012).

Il ne s’occupe pas non plus de l’apparence (CSS).

Installation

Le plugin s’installe comme n’importe quel plugin.

Il nécessite toutefois le plugin JQueryUi, qui est livré en standard avec SPIP 3.

À noter qu’il peut évidemment s’installer avec STEP

Création du menu

On peut créer le menu avec le plugin Menus, et l’installer dans son squelette à l’endroit souhaité. Je renvoie donc à la documentation du plugin Menus.

Pour que le menu créé ait un effet accordéon, il suffit de lui accorder la classe accordeon dans le champ correspondant du plugin Menus.

Attention : pour que l’effet accordéon fonctionne, le menu ne doit pas avoir plus de 2 niveaux.

Exemple

Je souhaite avec un menu accordéon qui « accordéonne » sur les rubriques de premiers niveaux, en affichant le cas échéant les rubriques du niveau inférieur.

Suivant la documentation du plugin Menus :
- j’insère dans mon squelette le code suivant :#INCLURE{fond=inclure/menu, env, identifiant=menu}
- Je crée un menu dont l’identifiant est menu et auquel j’accorde la classe CSS accordeon
- Dedans je crée une entrée de type « Liste ou arborescence de rubriques » que je limite à 2 niveau.

Un dessin vaut mieux qu’un discours :

Configuration avancée

La configuration permet d’ajouter des options, en suivant la syntaxe : option:valeur,option2:valeur etc. La liste des options se trouve sur le site de Jquery.

Le panneau de configuration du plugin permet aussi de préciser votre identifiant ou votre class, laissez le à .accordeon soit sa valeur par défaut si vous ne comprenez pas !

Le panneau de configuration est accessible via :

Configuration->Accordéon sous SPIP 2.1.
Squelettes->Menu JQuery Accordéon sous SPIP 3 ou SPIP 2.1 avec le plugin bandeau

Exemple d’option simple

Il s’agit de demander au menu accordéon de s’ouvrir sur la rubrique courante.

Dans le panneau de configuration, on met

active:'.on a'

En effet, le plugin Menu marque d’une class .on la rubrique courante.

Exemple d’options complexe

Dans cette illustration, le code demande à déplier en accordéon le menu qui a l’identifiant #listmenu, il s’applique ici sur un menu fermé de rubriques à 2 niveaux qui se dépliera d’un clic, tandis qu’on accède aux liens de premier niveau par un double-clic. Lorsque la rubrique parente est active, le menu est ouvert sur celle-ci. D’autre part autoHeight: false, permet de laisser le plugin calculer la hauteur à déplier, évitant de grands blancs si vous n’avez un nombre de sous-rubriques égales…

Voici un exemple de ce code particulier à coller dans les options de la configuration, sans ajout de parenthèses ou d’accolades.

event: 'click', 
collapsible:true, // to close all
header: 'a.hac',
active: 'a.hac.on', 
autoHeight: false,
navigation: true,
navigationFilter: function(){ 
	$('#listmenu a.hac').dblclick(function(){
	lien=$(this).attr('href');
	document.location = lien;
	return true;
	});
}

Voir en ligne : http://plugins.spip.net/accordeon

Vos commentaires

0 | 10

# Le 27 mars à 17:39, par enki En réponse à : Menu accordéon 2

Merci pour ce magnifique plugin que j’utilise conjointement avec galleria.

Je l’ai placé dans une rubrique qui contient plusieurs sous-rubriques chacune ayant des articles avec des images. Les sous-rubriques sont donc les « secteurs » de ma gallerie.

Lorsque je clique sur le titre dune rubrique, le menu s’ouvre et me montre les articles ! Je suis content c’est ainsi qu’il doit fonctionner, par contre serait il possible de supprimer les href des rubriques qui me sont inutiles ? J’éviterai ainsi aux moteurs de les envoyer sur des pages vides.

Enfin comment faire pour que lorsque j’arrive dans la rubrique mère mon menu m’amène directement au premier article de la première sous-rubrique ?

merci beaucoup !
- # ^ Le 27 mars à 18:10, par enki En réponse à : Menu accordéon 2
  
  Je constate un problème. Ma rubrique « mère » est la numéro 2. Dans les options sous « Numéro de la rubrique parente ou »courante« si la rubrique parente est la rubrique courante du contexte » j’ai donc mis 2 !
  
  Cela fonctionne bien, par contre lorsque je me rends sur un article qui se trouve dans la 2^e ou 3^e rubrique, le menu reste ouvert sur la première rubrique.... comment résoudre ce problème ?
  
  Je spécifie que lors de la création du menu jai choisi l’otpion « liste de rubriques articles »
- # ^ Le 27 mars à 19:55, par Maïeul En réponse à : Menu accordéon 2
  
  Bonjour,
  
  je ne suis pas sûr d’avoir bien compris tout vos problèmes. Auriez vous un site où je pourrais visualiser les choses ?
  
  En attendant, j’essaie de répondre à partir de ce que j’ai compris. En ce qui concerne les messages du premier forum, cela ne dépend pas du plugin menu accordéon, mais du plugin menu. Je vous invite à poster les questions dans le forum ad hoc.
  
  Pour le second problème, merci de me mettre un lien, que je puisse saisir le souci exacte,ent.
- # ^ Le 27 mars à 21:12, par enki En réponse à : Menu accordéon 2
  
  Je ne peux mettre l’url en ligne vous l’ai envoyé en privé.
  Le problème est en effet probablement avec le plugin menu mais jen suis pas sûr !
  
  Ce menu doit apparaître uniquement sous la rubrique no 2 et il affiche ses sous rubriques et articles.
  Pour ce faire dans le plugin menu ai spécifié dans les options que la rubrique parente est la rubrique deux, sinon il m’afficherait toute la hiérarchie des rubriques depuis la racine !
  
  Le problème est liée au pliage/dépliage des sous-rubriques qui affichent les articles.
  Lorsqu’on arrive la première sous rubrique est ouverte et on voit l’article/s qu’elle contient.
  Les autres sous-rubriques en dessous sont pliées et on ne voit donc pas leurs articles.
  
  Si je déplie une autre sous-rubrique et je me rends sur l’article de cette dernière une fois arrivé sur l’article dans le menu accordéon, la rubrique en cours se replie et cache l’article dans lequel je me trouve et le menu m’ouvre/déplie à nouveau la première rubrique !!!
  
  D où peut provenir ce problème ?
- # ^ Le 27 mars à 21:28, par Maïeul En réponse à : Menu accordéon 2
  
  pour le premier problème, je suis sûr que c’est bien dans menu que se trouve le problème ;-)
  
  pour ce qui est du problème du second poste, il faut ajouter un règlage dans le formulaire de configuration du plugin.
  
  active:'.on a'
  
  Si c’est bien cela le code à mettre (à tester, si ce n’est pas le cas il faut regarder dans la documentation la signification specifique de l’option active), merci de me le signaler. Je l’ajouterai comme exemple basique à la doc.
- # ^ Le 4 avril à 00:38, par enki En réponse à : Menu accordéon 2
  
  Oui c’est bien ca ! merci !!
Répondre à ce message
# Le 8 décembre 2012 à 18:37, par Tropicaloo En réponse à : Menu accordéon 2

Bonsoir,
Je cherche à tout hasard une âme charitable qui aurait déjà trouvé l’astuce ou le JS à paramétrer dans Accordeon 2 pour obtenir un menu à 3 niveaux ; exemple :
Rubrique 1 < clic pour accès direct
Rubrique 2 < clic accordeon
- sous-rubrique A < clic accordeon
* article 1 < clic pour accès direct
* article 2 < clic pour accès direct
- sous-rubrique B < clic accordeon
* article 3 < clic pour accès direct
* article 4 < clic pour accès direct
Rubrique 3 < clic pour accès direct

Mon menu est généré dynamiquement avec le plugin Menu mais je peux en faire un statique en Html si une solution existe côté JSQuery. Avec le code par défaut :
collapsible: true, active: $(".accordeon > li.on > a,.accordeon > li:first-child > a").last()
J’ai un effet accordeon sur Rubrique 2 mais pas sur ses sous-rubriques.
Quand aux rubriques 1 et 3, elles sont inactives (pas d’accès à la rubrique en cliquant dessus). Merci pour votre aide, j’avoue ne pas avoir trouvé de solution sur le site JQuery (en anglais et pas toujours évident à comprendre)
- # ^ Le 12 décembre 2012 à 21:47, par Tropicaloo En réponse à : Menu accordéon 2
  
  Je me réponds à moi-même. jQuery Accordeon ne sait pas gérer 3 niveaux. Voici le résultat de mes recherches, pour ceux que cela intéresse : une alternative à Accordeon (pas en plugin) qui permet l’utilisation à 3 niveaux > jQuery Collapsor
- # ^ Le 18 mars à 11:23, par jeanmarie En réponse à : Menu accordéon 2
  
  Salut,
  
  je suis dans la même situation... As-tu trouvé une solution via jQuery Collapsor ?
  J’ai jeté un oeil sur différents scripts, mais avant de tenter d’adapter quelque chose...
  
  Merci,
  
  jean marie
- # ^ Le 19 mars à 16:27, par jeanmarie En réponse à : Menu accordéon 2
  
  Bon, je me réponds aussi : pas expert en jQuery, j’ai quand même réussi à faire fonctionner le truc en utilisant la fonction slideToggle qui fait partie de l’API jQuery de base :
  http://spip.pastebin.fr/26757
  
  Et le squelette : http://spip.pastebin.fr/26758
  
  Voilà, si ça peut servir...
- # ^ Le 19 mars à 19:30, par Tropicaloo En réponse à : Menu accordéon 2
  
  Bonsoir Jeanmarie,
  De mon côté, pour pouvoir conserver le paramétrage depuis la rédaction avec le plugin Menu, j’ai finalement abandonné collapsor et j’ai « saucissonné » mon menu en plusieurs menus pour obtenir ce que je cherchais.
  Dès que j’ai un moment, j’essaye d’utiliser ton astuce avec grand plaisir. Merci pour ton aide.
- # ^ Le 21 mars à 12:42, par jeanmarie En réponse à : Menu accordéon 2
  
  Salut,
  
  Il y avait une erreur dans le squelette : la BOUCLE_compteur_article renvoyait autant de fois class=« dernier » qu’il y a d’articles dans la sous-rubrique. C’est résolu avec l’aide de la liste SPIP :)
  
  Voici donc la bonne version du squelette : http://spip.pastebin.fr/26793
  (solution nécessitant SPIP Bonux)
  
  Ne pas tenir compte de celle de mon message précédent...
  
  jean marie
Répondre à ce message
# Le 10 octobre 2012 à 00:07, par Tropicaloo En réponse à : Menu accordéon 2

Bonsoir,

Avec un SPIP 3.0.5 [19905] et Accordéon 3.1.0 SVN [64795] un simple rédacteur peut modifier via le bouton du bandeau « Squelettes » l’identifiant du menu ainsi que le paramétrage de l’animation.
Si quelqu’un a le code à rajouter pour restreindre ce paramétrage au seul Webmaster, je suis preneur.
Merci.
- # ^ Le 10 octobre 2012 à 01:11, par Maïeul En réponse à : Menu accordéon 2
  
  la question est à posé sur le forum du plugin menu ...
- # ^ Le 10 octobre 2012 à 02:24, par Tropicaloo En réponse à : Menu accordéon 2
  
  Pourtant il s’agit bien du paramétrage du menu accordeon et pas celui du plugin menu, ex :
  icons: false, autoHeight: false, collapsible: true, active: $(".accordeon > li.on > a,.accordeon > a").last()
  La page qui s’affiche s’intitule : Menu jQuery Accordéon...
- # ^ Le 10 octobre 2012 à 11:33, par Maïeul En réponse à : Menu accordéon 2
  
  a excusé moi, j’avais mal compris/mal lus.
  
  Je regarde tout cela : il faut que je réserve l’accés au webmestre.
- # ^ Le 10 octobre 2012 à 11:42, par Maïeul En réponse à : Menu accordéon 2
  
  heu vous êtes sûrs de votre propos ? Avec un compte auteur et la version 3.1.0, je n’ai pas d’accès à la configuration ...
- # ^ Le 10 octobre 2012 à 19:13, par Tropicaloo En réponse à : Menu accordéon 2
  
  Bonsoir Maïeul,
  
  Tout d’abord merci pour votre disponibilité et votre réactivité.
  J’ai effectué le test sur un site en ligne « propre » et je n’ai pas rencontré le problème. Désolé pour le bruit mais mon site en local où je fais les tests m’a induit en erreur. Je vais le réinstaller au propre.
Répondre à ce message
# Le 13 août 2012 à 21:40, par christianD. En réponse à : Menu accordéon 2

Bonjour,

Je suis sous Spip 3.0.4 et j’ai tout sauf :

1. comme 19Marine91, j’ai le petit triangle sur le titre des rubriques que je n’arrive pas à enlever malgré mes 4heures de tentative. Comment enlever ce triangle ?

2. l’autre souci est que les rubriques se mettent en ligne, les unes derrière les autres. Il y a bien l’effet accordéon mais ce serait encore mieux si les rubriques étaient l’une au-dessus de l’autre. Là-aussi, je ne trouve pas où modifier le css pour disposer les rubriques sous forme de liste, les unes au dessus des autres.

Merci d’avance.
- # ^ Le 13 août 2012 à 23:40, par Maïeul En réponse à : Menu accordéon 2
  
  Bonjour, désolé je n’ai pas eu le temps de me pencher sur les modifications de l’accordéon sous SPIP 3 avec la nouvelle version de jqueryUI.
  
  la solution pour le triangle (et j’ai mis du temps à trouver) est de mettre une option dans le formulaire de configuration du plugin (disponible dans la rubrique squelette) :
  
  icons:false
  
  Si vous avez d’autres réglages, les séparer par des virgule. Faite ensuite un recalcul des caches, notamment du cache js, et vider le cache du nav. Cela devrait normalement faire l’affaire.
  
  Dans vos css perso, ajoutez aussi
  
  .accordeon.ui-accordion li.ui-accordion-li-fix{ display:block; }
  
  Je ne sais pas encore si je vais modifier le plugin pour installer ces réglages par défaut ou bien changer la doc. Il faut que je reflechisse à ce qui est le plus pertinent.
  
  Ps : utilisez vous un outils style firebug ? cela vous aurez aider à trouver le style défaillant.
- # ^ Le 14 août 2012 à 00:41, par Maïeul En réponse à : Menu accordéon 2
  
  la version du plugin qui sortira cette nuit à 1h du matin devrait faire cela tout seul. Attention, pas de changement de numéro de version, mais passage de l’état « dev » à test.
- # ^ Le 14 août 2012 à 06:48, par ChristianD. En réponse à : Menu accordéon 2
  
  Bonjour Maïeul,
  
  C’est la bonne surprise du matin et je teste tout de suite. Je vous tiens au courant. J’utilise effectivement Firebug, ça aide énormément :-).
- # ^ Le 14 août 2012 à 07:12, par ChristianD. En réponse à : Menu accordéon 2
  
  Comme les autres fois, impec et ça marche super bien ! Un grand merci Maïeul.
- # ^ Le 14 août 2012 à 10:44, par ChristianD. En réponse à : Menu accordéon 2
  
  Une dernière chose.
  
  Je n’arrive pas à changer la div a de li.menu-entree.item. Je voudrais mettre color : #666566 ; text-decoration : none ; mais ça ne me le prend pas malgré tous mes essais... un peu partout.
- # ^ Le 14 août 2012 à 10:47, par Maïeul En réponse à : Menu accordéon 2
  
  bon, ok. je modifie la doc en conséquence, et je regarde après votre problème de li.
- # ^ Le 14 août 2012 à 10:53, par ChristianD. En réponse à : Menu accordéon 2
  
  « What a wonderful world » ! Merci.
- # ^ Le 14 août 2012 à 11:02, par Maïeul En réponse à : Menu accordéon 2
  
  vous être sur de votre classe ? il y a pas de li.menu-entree.item avec le plugin menu sous SPIP 3....
- # ^ Le 14 août 2012 à 11:12, par ChristianD. En réponse à : Menu accordéon 2
  
  En fait, c’est ce que je vois avec Firebug et je ne comprends pas pourquoi Spip ne corrige pas la couleur, au moins, puisque cette instruction semble être prise en compte.
  
  Je vous joins la copie écran de Firebug.
- # ^ Le 14 août 2012 à 11:35, par Maïeul En réponse à : Menu accordéon 2
  
  a ! c’est pas avec le plugin menu que vous l’utilisez, mais avec les menu lateral standard de SPIP. Ok.
  
  Votre problème de couleur vient que vous avez un lien dans votre li. C’est donc (si je ne m’abuse) le a qu’il faut styler (et le pb n’est pas lié à SPIP, mais au CSS)
- # ^ Le 14 août 2012 à 15:46, par ChristianD. En réponse à : Menu accordéon 2
  
  Ok, je regarde ça.
Répondre à ce message
# Le 24 mai 2012 à 17:20, par 19marine91 En réponse à : Menu accordéon 2

Bonjour,

Cet un plugin super c’est vrai. Un moment je bloquais et ça s’est débloqué je sais pas comment^^
Bref, j’aimerais qu’il , affiche même les rubriques sans articles (car les rubriques peuvent contenir du texte sans articles).
En affichant simplement le menu avec inc-menu_rubrique, il suffisait de rajouter tout, là je sais pas, il me le fait pour l’un d’entre eux seulement. Savez quoi faire ?

Cordialement
- # ^ Le 24 mai 2012 à 23:46, par Maïeul En réponse à : Menu accordéon 2
  
  bonjour, désolé, je n’ai rien compris.
  
  Pouvez vous expliquer comment est construit votre menu. Avec des squelettes perso ? avec le plugin menus ?
- # ^ Le 30 mai 2012 à 11:57, par 19marine91 En réponse à : Menu accordéon 2
  
  Bonjour,
  
  Désolée pour la réponse tardive, je m’étais penché sur un autre problème. Merci à vous pour votre rapidité.
  
  J’ai construit le menu à l’aide du plugin menus comme indiqué. Ensuite intégré dans un squelette perso.
  
  J’ai plusieurs rubriques. Certains ont des articles, d’autres non. Celles qui n’ont pas d’articles possède tout de même du contenu.
  Mon menu affiche sans problème les rubriques possédant des articles. Mais il n’affiche que certaines rubriques n’ayant aucun articles et n’affiche pas l’accueil.
  
  J’espère m’être exprimé plus clairement.
  
  En vous remerciant
  Cordialement
- # ^ Le 30 mai 2012 à 12:54, par Maïeul En réponse à : Menu accordéon 2
  
  Bonjour,
  
  en ce cas le problème ne vient pas de menu accordéon, mais du plugin menus. Il faudrait demander de l’aide dans le forum de ce plugin.
  
  cordialement
- # ^ Le 7 juin 2012 à 15:07, par 19marine91 En réponse à : Menu accordéon 2
  
  J’ai résolu certains problème, finalement j’ai un affichage illisible et surtout un-cliquable (je sais pas si ça se dit. J’ai joins une image.
- # ^ Le 7 juin 2012 à 15:09, par Maïeul En réponse à : Menu accordéon 2
  
  là, comme cela je ne peux pas vous aider. Je n’ai ni l’adresse du site, ni des informations sur les css que vous utilisez …
- # ^ Le 8 juin 2012 à 11:45, par 19marine91 En réponse à : Menu accordéon 2
  
  Je n’ai pas encore changer le CSS
  Concernant l’adresse, elle n’a pas public... le site est en travaux, je ne peux présenter un site sans menu.
  C’est possible de MP pour détails privé ?
  En tout cas l’effet accordéon n’est pas là... quand tout le jquery ne chargeait pas, c’était plus ergonomique
- # ^ Le 8 juin 2012 à 13:10, par 19marine91 En réponse à : Menu accordéon 2
  
  en bidouillant le CSS j’ai le menu qui va à la ligne (voir image) mais le clic ne charge aucune page (la mini-flèche se pli et dépli) et ne fait pas apparaitre de déroulement.
  
  Ce n’est pas un problème de js ça ?
- # ^ Le 8 juin 2012 à 16:27, par Maïeul En réponse à : Menu accordéon 2
  
  contact moi via le formulaire
- # ^ Le 20 juin 2012 à 13:48, par Maïeul En réponse à : Menu accordéon 2
  
  quelle version de SPIP ?
- # ^ Le 14 août 2012 à 00:44, par Maïeul En réponse à : Menu accordéon 2
  
  la version qui sort cette nuit devrait normalement résoudre tout ce sproblèmes, pour mettre des styles standard plus correct.
  
  attention : pas de changement de numéro de version, mais simplement passage à l’état test.
Répondre à ce message
# Le 30 mai 2012 à 22:31, par MarjorieV En réponse à : Menu accordéon 2

Bonjour,

Je viens de de transférer mon site sur un autre hébergeur. J’ai bien fais une sauvegarde de la base. Sur le nouveau hébergeur, mon site fonctionne hors, les plugings que j’ai installé (menu, menu accordeon 2) sont activés mais ne sont pas pris en compte dans mes pages de mon site.
Quelqu’un aurait une réponse ?

merci beaucoup !
- # ^ Le 30 mai 2012 à 22:37, par Maïeul En réponse à : Menu accordéon 2
  
  vous auriez une adresse ? avez vous vider le cache ?
Répondre à ce message
# Le 10 mars 2012 à 10:59, par Fennec72 En réponse à : Menu accordéon 2

le contexte : Je suis sous spip 3

Je m’escrime avec le plugin accordéon depuis deux jours :
Pourquoi, si j’ai fait fonctionné, sans problème, un autre plugin de menu, utilisant jQuery et s’appuyant sur le plugin « Menu » (le plugin « Menu jQuery Superfish »),
je n’y suis pas arrivé avec le plugin « Menu accordéon 2 » ?

une chose m’étonne :
- parmi les sous-dossier du plugin « Menu jQuery Superfish », il y a un sous-dossier « css » qui contient 3 feuilles de styles css (superfish.css, superfish-navbar.css et superfish-vertical.css).
- je ne vois rien d’équivalent dans le dossier du plugin « Menu accordéon 2 ».
- Quelle est la différence de fonctionnement entre ces 2 plugins qui fait que dans un cas il y a des feuilles de style css et dans l’autre non ?

Merci d’avance.
- # ^ Le 10 mars 2012 à 12:25, par Maïeul En réponse à : Menu accordéon 2
  
  Il n’y a pas de CSS car nous laisson la maitrise des css au webmestre. Le menu accordéon est juste là pour le jquery.
  
  Pour le fonctionnement sous SPIp 3, étant donné que vous ne donnez ni la méthode que vous avez suivi ni les problèmes que vous avez rencontré, j’aurais du mal à vous aider.
- # ^ Le 10 mars 2012 à 17:06, par Yffic En réponse à : Menu accordéon 2
  
  Comme dit Maïeul, le plugin s’appuie sur un autre plugin, jquery_ui, intégré au core en spip3. Et c’est ce dernier qui charge les js (et éventuellement les css les spip2, en spip3, je ne sais pas)... Mais tu peux très bien, récupérer les css et images d’un thème « tout fait » sur le site de jquery_ui et le mettre dans tes squelettes persos... Bref c’est moins immédiat que superFish, mais plus malléable au final...
Répondre à ce message
# Le 12 mai 2011 à 15:18, par korama En réponse à : Menu accordéon 2

oui oui, j’ai bien fais un menu avec le plugin menu, j’ai mis la classe accordeon, j’ai bien vérifié que le JQuery UI etait installé... et rien.
- # ^ Le 12 mai 2011 à 15:30, par Maïeul En réponse à : Menu accordéon 2
  
  bizarre,
  
  pourriez vous m’envoyer par mail votre code ?
- # ^ Le 30 juin 2011 à 14:16, par Christophe En réponse à : Menu accordéon 2
  Bonjour,
  Moi aussi, même problème : le plugin accordéon ne change rien : liste cliquable rubriques et articles...
  Installé sur la dist :
  
  <INCLURE{fond=inclure/menu, env, identifiant=accordeon}>
  
  ou
  
  #INCLURE{fond=inclure/menu, env, identifiant=accordeon}
  
  Plugin JQuery UI et plugin menu installés
  Merci d’avance
- # ^ Le 30 juin 2011 à 18:55, par Maïeul En réponse à : Menu accordéon 2
  
  auriez vous un site où je pourrais regarder tout cela ?
- # ^ Le 1er juillet 2011 à 16:01, par Christophe En réponse à : Menu accordéon 2
  
  Bonjour,
  
  C’est en local... j’ai l’impression que le jquery n’est pas détecté...
  ...
  Je vais essayer de mettre en ligne quelque part...
- # ^ Le 11 juillet 2011 à 14:56, par teenoo En réponse à : Menu accordéon 2
  
  Même problème que mes collègues ! Rien ne s’affiche...
- # ^ Le 11 juillet 2011 à 17:28, par Maïeul En réponse à : Menu accordéon 2
  
  même réponse qu’à vos collègues …
  
  chez moi ca marche, donc en l’absence de site de démo, dur d’aider :-)
- # ^ Le 12 juillet 2011 à 14:43, par teenoo En réponse à : Menu accordéon 2
  
  Au temps pour moi... Tout marche parfaitement, il ne me reste plus qu’à le customiser :)
- # ^ Le 12 juillet 2011 à 14:45, par Maïeul En réponse à : Menu accordéon 2
  
  peut tu dire ce qui n’allait pas ? ca peut servir aux collègue ;-)
- # ^ Le 12 juillet 2011 à 21:10, par Teenoo En réponse à : Menu accordéon 2
  
  J’avais juste pas pris la bonne option d’affichage avec le plug Menu (Rubriques et non articles de rubrique).
  En revanche, je n’arrive pas à trouver la feuille de style qui donne l’apparence actuelle à ce menu (fond gris dégradé et flèche active...), ça me dépannerait bien de savoir :)
- # ^ Le 12 juillet 2011 à 21:50, par Maïeul En réponse à : Menu accordéon 2
  
  lib/jquery-ui-1.8.9/themes/basejquery.ui.accordion.css
  
  à noter que jquery propose de fabriquer facilement son thème : http://jqueryui.com/themeroller/
  
  n’oublie pas d’utiliser le mécanisme de surcharge de spip.
- # ^ Le 18 juillet 2011 à 16:34, par Teenoo En réponse à : Menu accordéon 2
  
  Bonjour,
  
  le plugin est extra ! J’ai quelques questions toutefois d’ordre pratique :) Je constate que lorsque mon event est « click » l’accès aux articles en racine (niveau 0 du menu) ne sont pas accessibles tandis qu’en « mouseover » je n’ai pas de soucis... Où corriger ce bug ?
  
  Je tente de trier selon mon bon vouloir les articles et sous-rubriques du niveau 0 du menu appartenant tous à la rubrique n°11... Possible ?
  
  Merci pour vos réponse :)
- # ^ Le 19 juillet 2011 à 22:56, par Maïeul En réponse à : Menu accordéon 2
  
  pour le second point il faut numéroté les article et sous rubrique sous la forme XXX. Tittre, puis activer la suppression du numéro avec le couteau kiss (de préférence ne pas prendre le couteau suisse) ou avec le fichier mes_options.php minimal (http://geekographie.maieul.net/Un-fichier-mes_options-minimal).
  
  Pour le premier point, la raison est simple : le clique enclenche le basculement sur l’entrée réeel. Mais sur ce site http://www.planete-sciences.org/astro/ je n’ai pas ce problème avec le réglage suivant :
  
  autoHeight:false, event: 'click',active:'.on span'
  
  .
  
  Vérifiez les caches.
- # ^ Le 22 août 2011 à 10:57, par Teenoo En réponse à : Menu accordéon 2
  
  Bonjour,
  
  comment avez vous fait pour intégrer la classe .on en fonction de la rubrique ouverte ? Utilisez-vous #GET ? J’y arrive en PHP mais je ne suis pas très sûre avec le langage SPIP...
  
  Merci pour votre réponse.
- # ^ Le 22 août 2011 à 11:01, par Maïeul En réponse à : Menu accordéon 2
  
  normalement le plugin menus intégre directement cela dans ses fonctions. Pouvez vous donner un exemple de code ?
- # ^ Le 22 août 2011 à 11:08, par Teenoo En réponse à : Menu accordéon 2
  
  Voila mon code
  
  <BOUCLE_appel(CONDITION){si #ENV{appel_menu}|oui}>
  
  <B_rubriques>
  <BOUCLE_rubriques(RUBRIQUES){id_parent=#GET{id_rubrique}} {par num titre}>
  <BOUCLE_articles(ARTICLES){id_rubrique=#ID_PARENT}{id_article!=27}{par num titre}{titre<#TITRE*}{doublons avant}>
  <li class="menu-rub2 item[ (#ID_ARTICLE|menus_exposer{rubrique,#ENV*{env}})]">
  <a href="#URL_ARTICLE" title="[(#TITRE|attribut_html)]">[(#TITRE|supprimer_numero)]</a>
  
  </BOUCLE_articles>
  #SET{niveau_actuel,#EVAL{1}|intval}
  <li class="menu-rub2 item[ (#ID_RUBRIQUE|menus_exposer{rubrique,#ENV*{env}})]">
  <a href="#URL_RUBRIQUE" title="[(#TITRE|attribut_html)]">[(#TITRE|supprimer_numero)]</a>
  [(#SET{cond,#GET{niveau_max}|>{#GET{niveau_actuel}}|et{#GET{sousrub_cond}|?{#ID_RUBRIQUE|menus_exposer{rubrique,#ENV*{env}},'on'}}})]
  </li>
  
  </BOUCLE_rubriques>
  
  <BOUCLE_articles_apres(ARTICLES){id_rubrique}{par num titre}{doublons avant}>
  <li class=" menu-rub item[ (#ID_ARTICLE|menus_exposer{rubrique,#ENV*{env}})]"><a href="#URL_ARTICLE" title="[(#TITRE|attribut_html)]">[(#TITRE|supprimer_numero)]</a>
  </BOUCLE_articles_apres>
  
  </BOUCLE_appel>
  Télécharger
- # ^ Le 22 août 2011 à 11:10, par Maïeul En réponse à : Menu accordéon 2
  
  ce code, vous l’appeler directement où c’est un code du plugin menu ? je ne comprend pas pourquoi vous ne passez pas par le plugin menu, comme indiqué dans la documentation
- # ^ Le 22 août 2011 à 11:13, par Teenoo En réponse à : Menu accordéon 2
  
  C’est bien le plugin menu sauf que j’ai modifié le code interne pour appeler les rubriques et les articles afin de les classer comme je le souhaitais.
- # ^ Le 22 août 2011 à 11:22, par Maïeul En réponse à : Menu accordéon 2
  
  hum,
  
  vous faites ce que vous voulez hein ! mais faites bien attention à bien surchargez le code et non pas à modifier directement les fichiers.
  
  Normalement le filtre menu_exposer se charge de cela, à priori. Sinon regarder du coté du filtre exposer (dans la documentation de spip)
- # ^ Le 22 août 2011 à 12:33, par Teenoo En réponse à : Menu accordéon 2
  
  Ah non j’ai été trop vite, le code est plutôt :
  
  [(#SET{id_rubrique, #ENV{id_rubrique}|intval})] [(#SET{id_secteur_exclus, #ENV{id_secteur_exclus,0}|intval})] [(#SET{niveau_max_txt, #ENV{niveau}|intval|?{#ENV{niveau},infini}})] [(#SET{niveau_max, #ENV{niveau}|intval|?{#ENV{niveau},1000}})] [(#SET{sousrub_cond, #ENV{sousrub_cond}|=={oui}|?{'on',''}})] [(#SET{afficher_articles, #ENV{afficher_articles}|=={oui}|?{'on',''}})] [(#SET{masquer_articles_uniques, #ENV{masquer_articles_uniques}|=={oui}|?{'on',''}})] [(#SET{articles_max, #ENV{articles_max}|intval|?{#ENV{articles_max},10000}})] [(#SET{articles_max_plus_un, #GET{articles_max}|plus{1}})] [(#SET{articles_max_affiches, #ENV{articles_max_affiches}|intval|?{#ENV{articles_max_affiches},10000}})] [(#SET{id_rubriques_exclues, #ENV{id_rubriques_exclues}|explode{','}|sinon{#ARRAY}})] [(#SET{tri_num, #ENV{tri_num}|ou{#ENV{tri_alpha}}|?{#ENV{tri_num},'titre'}})] [(#SET{tri_alpha, #ENV{tri_num}|ou{#ENV{tri_alpha}}|?{#ENV{tri_alpha},'titre'}})] [(#ENV{appel_formulaire}|oui) [(#SET{titre, #GET{id_rubrique}|?{#INFO_TITRE{rubrique, #GET{id_rubrique}}, <:info_racine_site:>}})] [(#ENV{secteurlangue}non)<div class="titre">#GET{titre}</div>] [(#ENV{secteurlangue}oui)<div class="titre"><:menus:nom_menu_secteurlangue:></div>] <div class="infos"> [(#GET{niveau_max_txt}|=={infini}|non) <:menus:entree_sur_n_niveaux{n=#GET{niveau_max_txt}}:> ] [(#GET{niveau_max_txt}|=={infini}|oui) <:menus:entree_infini:> ] [(#GET{id_secteur_exclus}|=={0}|non) <:menus:info_secteur_exclus{id_secteur=#GET{id_secteur_exclus}}:> ] [(#GET{sousrub_cond}|oui) <br /><:menus:info_sousrub_cond:> ] [(#GET{afficher_articles}|oui) <br /><:menus:info_afficher_articles:> [(#GET{articles_max}|<{10000}|oui) / <:menus:info_articles_max{max=#GET{articles_max}}:>] [(#GET{articles_max_affiches}|<{10000}|oui) / <:menus:info_articles_max_affiches{max=#GET{articles_max_affiches}}:>] [(#GET{masquer_articles_uniques}|oui) / <:menus:info_masquer_articles_uniques:>] ] <br /><:menus:info_tri:> [(#GET{tri_num}) <:menus:info_tri_num:>][(#GET{tri_num}|et{GET{tri_alpha}}), ][(#GET{tri_alpha}) <:menus:info_tri_alpha:>] </div> ] <BOUCLE_appel(CONDITION){si #ENV{appel_menu}|oui}> <B_rubriques> <BOUCLE_rubriques(RUBRIQUES){id_parent=#GET{id_rubrique}} {par num titre}> <BOUCLE_articles(ARTICLES){id_rubrique=#ID_PARENT}{id_article!=27}{par num titre}{titre<#TITRE*}{doublons avant}> <li class="menu-rub item[ (#ID_ARTICLE|menus_exposer{rubrique,#ENV*{env}})]"> <a href="#URL_ARTICLE" title="[(#TITRE|attribut_html)]">[(#TITRE|supprimer_numero)]</a> </BOUCLE_articles> #SET{niveau_actuel,#EVAL{1}|intval} <li class="menu-rub item[ (#ID_RUBRIQUE|menus_exposer{rubrique,#ENV*{env}})]"> <a href="#" title="[(#TITRE|attribut_html)]">[(#TITRE|supprimer_numero)]</a> [(#SET{cond,#GET{niveau_max}|>{#GET{niveau_actuel}}|et{#GET{sousrub_cond}|?{#ID_RUBRIQUE|menus_exposer{rubrique,#ENV*{env}},'on'}}})] <BOUCLE_test_niveau(CONDITION){si #GET{cond}}> <B_sous_rubriques> <ul class="menu-liste menu-items"> <BOUCLE_sous_rubriques(RUBRIQUES){id_parent}{par num #GET{tri_num}}{par #GET{tri_alpha}}> #SET{niveau_actuel,#GET{niveau_actuel}|plus{1}} <li class="menu-articles item[ (#ID_RUBRIQUE|menus_exposer{rubrique,#ENV*{env}})]""> <a href="#URL_RUBRIQUE" title="[(#TITRE|attribut_html)]">- #TITRE</a> [(#SET{cond,#GET{niveau_max}|>{#GET{niveau_actuel}}|et{#GET{sousrub_cond}|?{#ID_RUBRIQUE|menus_exposer{rubrique,#ENV*{env}},'on'}}})] <BOUCLE_test_niveau2(CONDITION){si #GET{cond}}> <BOUCLE_sous_sous(BOUCLE_sous_rubriques)></BOUCLE_sous_sous> </BOUCLE_test_niveau2> </li> </BOUCLE_sous_rubriques> [(#REM) ------------------------------------------------ Premier cas de gestion de l'affichage des articles Ce code est dupliquÈ dans le 2e cas, voir ci dessous (a un ul pres) Il n'est pas possible en spip 2 d'utiliser inclure pour eviter la duplication Cf http://comments.gmane.org/gmane.comp.web.spip.devel/60475 Ce doit etre le meme soucis qui fait que #URL_RUBRIQUE est trasnforme en spip.php?page=rubrique&id_rubrique=2&connect=condition qu'on enleve avec le filtre parametre_url ] <BOUCLE_test_articles_si_sousrub(CONDITION){si #GET{afficher_articles}}> [(#REM) On commence par compter le nombre d'articles de la rubrique] #SET{cpt,0} <BOUCLE_cpt_si_sousrub(ARTICLES){id_rubrique}> </BOUCLE_cpt_si_sousrub>#SET{cpt,#TOTAL_BOUCLE}</B_cpt_si_sousrub> [(#REM) On affiche les articles : - S'il y en a moins que le max demandÈ - ET - si on n'a pas demandÈ de masquage des articles uniques - OU si le masquage des articles uniques est demandÈ et qu'il y en a plus d'un ] #SET{afficher,non} [(#GET{cpt}|<={#GET{articles_max}}|oui|et{#GET{cpt}|>{1}|ou{#GET{masquer_articles_uniques}|=={'on'}|non}}) #SET{afficher,oui}] <BOUCLE_test_afficher_si_sousrub(CONDITION){si #GET{afficher}|=={oui}|oui}> <B_articles_si_sousrub> <BOUCLE_articles_si_sousrub(ARTICLES){id_rubrique}{par num #GET{tri_num}}{par #GET{tri_alpha}}{0,#GET{articles_max_affiches}}> <li class="menu-articles item[ (#ID_ARTICLE|menus_exposer{rubrique,#ENV*{env}})]""> <a href="#URL_ARTICLE" title="[(#TITRE|attribut_html)]">- #TITRE</a> </li> </BOUCLE_articles_si_sousrub> [(#GET{cpt}|>{#GET{articles_max_affiches}}|oui) <li><a class="suite" href="[(#URL_RUBRIQUE|parametre_url{connect,''})]"><:menus:tous_les_articles:></a></li> ] </B_articles_si_sousrub> </BOUCLE_test_afficher_si_sousrub> </BOUCLE_test_articles_si_sousrub> [(#REM) --------------------------- Fin Premier cas ] </ul> </B_sous_rubriques> [(#REM) ---------------------------------- Second cas de gestion de l'affichage des articles ] <BOUCLE_test_articles_pas_de_sousrub(CONDITION){si #GET{afficher_articles}}> [(#REM) On commence par compter le nombre d'articles de la rubrique] <BOUCLE_cpt_pas_de_sousrub(ARTICLES){id_rubrique}> </BOUCLE_cpt_pas_de_sousrub>#SET{cpt,#TOTAL_BOUCLE}</B_cpt_pas_de_sousrub> [(#REM) On affiche les articles : - S'il y en a moins que le max demandÈ - ET - si on n'a pas demandÈ de masquage des articles uniques - OU si le masquage des articles uniques est demandÈ et qu'il y en a plus d'un ] #SET{afficher,non} [(#GET{cpt}|<={#GET{articles_max}}|oui|et{#GET{cpt}|>{1}|ou{#GET{masquer_articles_uniques}|=={'on'}|non}}) #SET{afficher,oui}] <BOUCLE_test_afficher_pas_de_sousrub(CONDITION){si #GET{afficher}|=={oui}|oui}> <B_articles_pas_de_sousrub> <ul class="menu-liste menu-items"> <BOUCLE_articles_pas_de_sousrub(ARTICLES){id_rubrique}{par num #GET{tri_num}}{par #GET{tri_alpha}}{0,#GET{articles_max_affiches}}> <li class="menu-articles item[ (#ID_ARTICLE|menus_exposer{rubrique,#ENV*{env}})]"> <a href="#URL_ARTICLE" title="[(#TITRE|attribut_html)]">- #TITRE</a> </li> </BOUCLE_articles_pas_de_sousrub> [(#GET{cpt}|>{#GET{articles_max_affiches}}|oui) <li><a class="suite" href="[(#URL_RUBRIQUE|parametre_url{connect,''})]"><:menus:tous_les_articles:></a></li> ] </ul> </B_articles_pas_de_sousrub> </BOUCLE_test_afficher_pas_de_sousrub> </BOUCLE_test_articles_pas_de_sousrub> [(#REM) --------------------------- Fin Second cas ] <//B_sous_rubriques> </BOUCLE_test_niveau> </li> </BOUCLE_rubriques> <BOUCLE_articles_apres(ARTICLES){id_rubrique}{par num titre}{doublons avant}> <li class="menu-rub item[ (#ID_ARTICLE|menus_exposer{rubrique,#ENV*{env}})]"><a href="#URL_ARTICLE" title="[(#TITRE|attribut_html)]">[(#TITRE|supprimer_numero)]</a> </BOUCLE_articles_apres> </BOUCLE_appel>
Répondre à ce message
# Le 25 juillet 2011 à 15:07, par jcdx En réponse à : Menu accordéon 2

Bonjour à tous,
J’ai un problème de compatibilité de plugin, sur SPIP 2.0.10, le plugin (il s’agit là de la première version) ne fonctionne pas en même temps que le plugin sjcycle (première version également).
Je suppose qu’il s’agit d’un problème de version de Jquery... Quelqu’un a-t-il une idée plus précise du problème ??
Merci d’avance.
- # ^ Le 26 juillet 2011 à 18:17, par Maïeul En réponse à : Menu accordéon 2
  
  quel est la nature du non fonctionnement ? un message d’erreur ?
  
  a priori le plugin est prévu pour fonctionner sur 2.1, pas sur 2.0
Répondre à ce message
# Le 7 mai 2011 à 15:41, par Abel En réponse à : Menu accordéon 2
Bonjour et merci pour ce plugin.

Je ne l’utilise pas pour faire un menu mais pour avoir une gestion de l’accordéon de jQueryUI dans les articles.
Je colle donc mon code dans le champ texte d’un article :

<div class="accordeon">

<h3><a href="#">Section 1</a></h3>

<div>

<p>

Lorem ipsum.

</p>

</div>

<h3><a href="#">Section 2</a></h3>

<div>

<p>

Lorem ipsum.

</p>

</div>

</div>

Télécharger

Ensuite, c’est très étrange : l’affichage se passe très bien si je mets ma boucle sur la page d’accueil du site, mais dans les pages « articles » l’animation ne fonctionne pas. J’ai beau retourner le problème je ne trouve pas de raison à ça.
Auriez vous une idée ?

Merci !
- # ^ Le 12 mai 2011 à 16:05, par Abel En réponse à : Menu accordéon 2
  
  Bon en fait c’est résolu. J’avais un petit conflit avec un autre script jquery...
Répondre à ce message

0 | 10

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message
Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Ajouter un document

gif, jpg, png

SPIP-Contrib

Menu accordéon 2

Principe

Installation

Création du menu

Exemple

Configuration avancée

Exemple d’option simple

Exemple d’options complexe

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Sur le Web

Vos commentaires

Répondre à cet article

Ça discute par ici

CKeditor 3.0

Twitter

ScolaSPIP pour SPIP3

Saisies

Agenda 2.0

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN