Plugin Menu Accordéon

Ceci est une archive périmée mais qui reste intéressante, parfois autant pour l’article que les commentaires associés.

Animer le menu de SPIP avec un effet d’ouverture de tiroir.

Mode d’emploi

Installer le plugin
Le plugin est disponible sur la zone pour ceux et celles qui utilisent svn, ou sous forme d’archive zip toujours sur la zone. Installation et activation comme tous les plugins.

Adaptation des squelettes

Pour insérer le menu dans vos squelettes il suffit de modifier l’appel du menu inc-rubriques [1] :
-  Par exemple pour le squelette « sommaire.html » à la ligne 117 modifier : <INCLURE{fond=inc-rubriques}>, en le remplaçant par : <INCLURE{fond=inc-menu-accordeon}>
-  Pour inclure le menu dans les pages rubrique et articles du site il faudra insérer le code suivant dans vos squelettes : <INCLURE{fond=inc-menu-accordeon}{id_rubrique}>

Remarque : Lorsque le menu est configuré pour lister les articles du site, on peut l’insérer de cette manière dans le squelette article.html :

<INCLURE{fond=inc-menu-accordeon}{id_rubrique}{id_article}>

Ainsi l’article en cours d’affichage sera mis en évidence dans le menu.

Demo

Ce plugin repose sur le script jQuery Accordionde de Jörn Zaefferer. Pour apprécier l’impressionnant effet dépliant, se reporter directement à sa page de démo.

Configuration

La page de configuration est accessible via l’espace privé si vous avez installé le plugin CFG. Le lien vers la page de configuration est accessible en bas du descriptif du plugin sur la page de gestion des plugins. Cette page de configuration permet de paramétrer le menu.

Quels éléments seront listés dans le menu :

-  le choix « articles » permet de définir que le menu listera les rubriques principales du site (les secteurs) ainsi que les articles contenus dans ces rubriques (utile pour un petit site avec une arborescence très simple).
-  le choix « rubriques » permet de définir que le menu listera les secteurs du site et les rubriques contenues par ces secteurs.
-  Par défaut le menu listera les rubriques du site.

Comportement du menu :

-  dépliement du clic (valeur par défaut)
-  dépliement du menu au survol

Compatibilité

Le plugin fonctionne avec une version 1.9.2 de SPIP et a été testé sous Firefox 2 et Internet Explorer 6 (à tester sous Safari et Opéra).

Lorsque le javascript est désactivé le script utilisé se dégrade de façon à ce que le menu reste utilisable. Si c’est le cas, toutes les rubriques du menu seront « développées » et tout de même accessibles aux visiteurs.

Améliorations à apporter

Ajouter les liens vers les secteurs pour les rendre accessibles. Plusieurs solutions sont envisageables :

  1. Ajouter le lien sur les secteurs « dépliables ». Du coup si on clique une fois sur le lien le menu se déplie et un deuxième clic permet d’accéder au secteur "déplié".
  2. Autre solution qui sera d’ailleurs une option disponible dans la prochaine version du plugin jquery accordion de Zaefferer ; répliquer le nom du secteur sous forme de lien dans la partie dépliée de l’élément du menu.
  3. Il y a peut-être une solution en utilisant une image pour faire le lien vers le secteur déplié, mais il faudrait que ça reste accessible.

Pour l’instant c’est la première solution qui est utilisée dans le plugin.

Notes

[1inc-rubriques si vous utilisez une organisation type squelettes « dist » de la distribution standard de SPIP, ou l’équivalent avec une autre structure de squelettes

Discussion

46 discussions

  • Est-il possible en cliquant sur le titre d’une rubrique d’afficher la page de cette rubrique tout en déroulant les titres des sous-rubriques/articles dans le menu ?

    Répondre à ce message

  • 1

    Bonjour ou bonsoir ,

    J’utilise sarka 3.0 et spip 2.1.2 en test sur un server local.
    Ma question est : comment avoir un menu accordéon multiniveaux ou de niveaux > à 2
    car j’ai une rubrique racine qui contient une sous-rubrique qui ,elle , contient 2 sous-rubrique
    alimenté en article toutefois je ne sais pas y aboutir car niveaux actuels < 2
    Pouvez-vous me dire comment modifier la boucle car débutant en spip ,
    merci d’avance.

    Répondre à ce message

  • nutella42

    Bonjour,

    J’essaie depuis des heures d’avoir un menu accordéon mais sans succès.

    J’ultilise SPIP 2.1 et Eva WEB4. Je me sert aussi du plugin EVA habillage.

    J’ai bien installé le plugin Menu accordéon mais je ne sais pas ensuite où faire les changements indiqués.

    Merci d’avance pour votre aide...

    Répondre à ce message

  • nutella42

    Bonjour,
    J’essaie depuis des heures d’avoir un menu « accordéon » mais j’en suis bien incapable !
    Pourriez-vous m’aider ?
    J’utilise SPIP 2.1, EVA-Web 2.4 et le plugin « Habillage d’Eva ».

    J’ai installé le plugin accordéon mais je ne sais pas où faire les changements indiqués ?

    Merci pour votre aide.

    Répondre à ce message

  • 4

    hello, en 2.1 rc1 le menu est tout déplié erreur ligne 15

    jQuery.filter(b, [i]).r is undefined

    [Break on this error] eval(function(p,a,c,k,e,r)e=function(...n|selected|click|fn’.split(’|’),0,{}))

    • Salut,

      Comme indiqué en tête de page ce plugin est compatible avec SPIP 1.9.x avant tout. Il est possible qu’il fonctionne avec SPIP 2.0.x mais pas avec SPIP 2.1 qui utilise une version de jQuery bien plus récente. Je l’ai déjà dit dans ce forum, je ne compte plus mettre à jour ce plugin, donc si quelqu’un veut continuer à s’en occuper il n’y a pas de problème le code est sur la zone.

      ++

    • Ah ! b_b...
      Tu ne le maintiens plus, c’est bien dommage, car, ce p... de menu, il était pourtant génial :)
      Et surtout unique sur la contrib !
      Vu que j’ai pas trouvé mieux, je pense que je vais devoir faire une « régression » et attendre les retours critiques de mes utilisateurs.
      A moins que je ne fasse la màj de SPIP...

    • je confirme bien dommage :(

    • j’avoue dommage et peu, voire pas d’alternative ;-(

    Répondre à ce message

  • 2
    anonyme

    Bonjour à tous. Y a-t-il une version disponible pour la version de spip 2.1 ?

    • Non et je crois pas que quelqu’un ait bougé depuis mon dernier message quelques pixels plus bas que celui-ci :p

      ++

    • anonyme

      Merci pour ta réactivité.
      Aurais tu une piste à m’avancer pour réaliser ce genre de projet ou alors une petite idée pour un plug in qui s’y rapproche.
      Merci encore pour ton travail.
      Bonne continuation.
      ++

    Répondre à ce message

  • Thibault

    J’ai inséré ce menu sur mon site mais j’ai une petite requète à faire ...

    En effet je voudrais insérer une liste de liens a l’intérieur de mes divisions.

    En leur ajoutant un CSS j’arrive à désactiver et appliquer mon propre CSS à ces nouveaux liens mais quand je clique dessus il replie le menu sur lui même.

    Merci d’avance :)

    Répondre à ce message

  • Bonjour et merci pour ce plugin qui a l’air de correspondre en tout point s à ce que je cherche. Mon but est le suivant : afficher les articles ratachés au mot clé « accordeon » avec se plugin.
    Je m’explique dans ma rubrique l’article n°1 s’affiche directement en entier : tire, texte, docs et brèves (il n’y a plus de lien sur le titre) et les 2 autres articles (mot clé accordéon) n’affichent que le titre qui, au survol déplient le texte.
    Je ne sais pas si j’ai été bien claire.
    Jusqu’alors j’ai créer 1 mot clé « accordéon » que j’ai attaché à mes deux articles + la rubrique mère .
    Mais j’ignore :

    1.comment faire la boucle_articles choix de mon mot clé

    3.Comment modifier inc-menu-accordeon-art pour qu’il n’affiche que les titre des articles de la rubrique mère.

    3.Comment modifier inc-menu-accordeon.html pour qu’il affiche le TEXTE au survol du titre de l’article en question

    En fait j’ignore tout et à force de bidouiller le code je ne m’y retrouve plus du tout, donc si quelqu’un à une piste, elle est bien venue !
    Merci à tous

    Répondre à ce message

  • 1

    est ce qu’il est possible d’utiliser ce plugin autre part qu’à la racine du site ?

    • « est ce qu’il est possible d’utiliser ce plugin autre part qu’à la racine du site ? »

      ben oui, il n’ y a pas de raison que ce ne soit pas possible. il suffit d’insérer le code au bon endroit et de modifier les boucles dans le fichier inc_menu... pour obtenir l’affichage que l’on veut.

    Répondre à ce message

  • POur info

    Je voulais faire apparaitre dans ce menu les articles de chaque rubrique sauf celle des sous rubriques de mes photothèques.

    J’ai donc choisi via cfg les articles à lister, puis modifier le fichier :

    inc-menu-accordeon-art.html de la façon suivante

    <BOUCLE_menu_articles(ARTICLES) {id_rubrique}{id_rubrique !=7} {par num titre}>
    					<li><a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
    				</BOUCLE_menu_articles>

    un soucis à ce moment là mes sous rubriques n’apparaissent pas dans le menu, j’ai donc ajouté avant cette boucle, ceci pour qu’elle apparaissent dans le menu

    <!-- modif sous rubrique de photottheque -->
    		<B_sous_rubriques>
    			<ul>
    				<BOUCLE_sous_rubriques(RUBRIQUES)  {id_parent} {par num titre}>
    					<li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
    				</BOUCLE_sous_rubriques>
    			</ul>
    			</B_sous_rubriques>
    			<!-- fin modif -->
    			<B_menu_articles>
    			<ul>
    				<BOUCLE_menu_articles(ARTICLES) {id_rubrique}{id_rubrique !=7} {par num titre}>
    					<li><a href="#URL_ARTICLE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
    				</BOUCLE_menu_articles>
    			</ul>

    rubrique ID 7 etant bien sur la rubrique principale de mes photothèques
    et ca me donne le resultat voulu.

    Répondre à ce message

  • Bonjour, je suis novice sous spip et je n’arrive pas à régler ce plugin (qui est parfaitement ce que je cherchais au passage !), le site étant en deux langues à la racine, je vous voudrais que ce soit les rubriques et qui se déplie pour faire apparaitre les sous rubriques, mais pour le moment ce sont les deux langues qui se déplient. J’ai réussi à faire apparaître uniquement la langue concernée, mais je n’arrive pas à faire déplier les rubriques ... si quelqu’un pourrait m’aiguiller sur la solutions ?! merci

    Répondre à ce message

  • 1

    Bonjour

    J’ai mis en place le plugin sans trop de problème pour lister les rubriques puis les articles mais quand je clique sur le lien de l’article, la page de l’article se charge mais le menu se repli.

    Avez vous le même problème ?

    Merci

    ci joint le lien vers le site : yann.suaudeau.free.fr

    • Bonjour,
      comment cacher l’affichage d’une rubrique dans l’espace public avec accordéon. J’avais cette fonction avec le squellette que j’utilise mais elle semble ne pas s’appliquer avec l’utilisation d’accordéon. Merci de me donner une solution car je sèche.

    Répondre à ce message

  • 1

    Bonjour,

    comment peut on parametrer la vitesse du déploiement des sous rubriques ?

    Merci.

    • Bonjour,
      j’ai un problème d’affichage horizontal du plugin. Le menu s’affiche au centre de la page. Je n’ai pas ce problème avec mozilla. Si vous avez une solution !
      Merci
      Autre petite question, comment mettre les rubriques en gras.

    Répondre à ce message

  • Bonjour, j’interviens dans ce forum pour poser une question, demander un coup de main.

    J’ai installé le plugin (Spip 2.0.9). Tout marche parfaitement bien. J’aimerais juste que quand l’internaute arrive sur la page, le premier sous menu soit déplié (« selected »), sur le modèle exposé sur cette page : http://jquery.bassistance.de/accordion/demo/

    Est-ce possible ? Cette question a-t-elle déjà été traitée ?
    Merci d’avance.
    Fred L.

    Répondre à ce message

  • J’ai SPIP 2 et EVA 4 et j’ai utilisé cfg pour paramétrer « les articles » et « survol ». Le plugin ne fonctionne pas.

    Répondre à ce message

  • Bonjour, je suis en train d’utiliser ce plugin qui est tout à fait agréable, malheureusement il n y a pas la possibilité de faire défiler les sous rubriques d’une rubrique. Si quelqu’un a réussi à bricoler quelque chose pouvait faire afficher ça :

    Rubrique principale : (déploiement)
    Sous rub 1
    Sous rub 2
    Sous-sous rub 1
    Sous-sous rub 2
    Sous Rub 3

    Merci !

    Répondre à ce message

  • Marche très bien avec SPIP 2.0. Suffit d’installer le plugin CFG.

    ++

    Cyp

    Répondre à ce message

  • 1

    Incompatible chez moi avec spip 2...

    • Bonsoir,

      Oui c’est fort possible que ce plugin ne soit pas compatible avec SPIP 2 (en même temps c’est bien indiqué dans le haut de cette page sous l’intitulé Versions). Je ne m’en occupe plus trop et n’ai pas fait de mise à jour sur celui-ci depuis pas mal de temps... Si quelqu’un veut s’y coller pour le rendre compatible avec SPIP 2 il est sur la zone.

      ++

    Répondre à ce message

  • Waldt etienne

    Incompatibilité chez moi aussi avec le plugin thickbox spip 1.9.2g.
    J’ai vidé le dossier temp et vidé le cache...

    Répondre à ce message

  • Bonjour,
    J’ai légèrement modifié ce plugin pour avoir le texte de l’article qui se déroule lorsque l’on clique sur le menu.

    Ma question :

    Est-il possible d’activer le 1er menu comme sur le 1er exemple sur cette page ?

    http://jquery.bassistance.de/accordion/demo/

    Il doit y avoir possibilité d’ajouter quelque part « active : true » mais je ne vois pas ou ?

    Merci

    Répondre à ce message

  • 1

    Bonjour,

    Sous SPIP 1.9.2e il y a incompatibilité avec les plugins Thickbox et GoogleMap Api. Sans doute qq chose à voir avec les appels à JQuery ?
    Pas assez compétent pour en dire plus, mais si quelqu’un a une idée...

    Répondre à ce message

  • Super plugin, bravo :) !

    Tout marche très bien, mais juste pour info, pour avoir en page d’accueil la première rubrique ouverte, existe-il une méthode ?

    ++

    Répondre à ce message

  • Bonsoir,

    Le plugin est paramétré pour afficher les rubriques et leurs articles, sur clic (navigateur : firefox 3).

    Lorsque l’on clique une première fois sur une rubrique, celle-ci se déroule correctement.

    Cependant, si l’on clique sur une autre rubrique, le clic actionne cette fois-ci le lien vers la rubrique et non son déploiement !

    L’un d’entre vous a-t-il déjà rencontré ce problème ? Et si oui, avez-vous trouvé une solution ?

    Cordialement,

    Juliette

    Répondre à ce message

  • 1
    assobachant

    Merci pour le menu ....

    Une question ; est t’il possible d’afficher les sous rubriques dans le menu et si oui comment

    Exemple :
    vies associatives / football
    vie associatives / assobachant

    etc...

    merci

    l’adresse du site pou vous faire une idée
    @micalement stéphane

    • Salut Stéphane,

      Dépèches-toi de mettre une page index avant de te faire bloquer ton site par Yohan :-((

      Cordialement

      Tabaco95

    Répondre à ce message

  • 1

    Bonjour,

    Est-il possible en cliquant sur le titre d’une rubrique d’afficher la page de cette rubrique tout en déroulant les titres des sous-rubriques/articles dans le menu ?

    merci
    dd

    • Bonjour, je suis à la recherche de cette même faisabilité.
      Idem, je cale pour l’instant.

      Rappel de ce qui est recherché :
      au clic, rubrique X s’affiche et ses sous-rubriques se déplient.

      Merci de votre aide.

    Répondre à ce message

  • 1
    couicsilver

    Bonjour,

    J’utilise cette boucle récursive pour lister l’ensemble des sous-rubriques (fichier inc-menu-accordeon-rub.html) :

    <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
                    <li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|supprimer_numero|couper{80})]</a>
    								
    								<B_A1>
    								<BOUCLE_A1(ARTICLES) {id_rubrique} {par num titre, titre}>
    								<ul>
                <li><a href="#URL_ARTICLE" style="color:grey;font-style:italic">[(#TITRE|couper{80})]</a></li>
    
    								</ul>
                                    </BOUCLE_A1>
    								</B_A1>
    								<//BA1>
    								
    								<B_R1>								
                                    <BOUCLE_R1(RUBRIQUES) {id_parent} {par num titre, titre}>
    								<ul>
    					<li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero|couper{80})]</a></li>
    									<BOUCLE_R2(BOUCLE_R1)>
    									</BOUCLE_R2>	
    								</ul>
    								</BOUCLE_R1>
    								</B_R1>
                    </li>
    </BOUCLE_rubriques>

    Avez-vous une idée pour pouvoir « replier » les sous-rubriques qui contiennent des sous-sous-rubriques etc. ?

    Merci d’avance

    • Bonjour,
      Je suis aussi très intéressé par l’utilisation du plugin pour lister les rubriques, sous-rubriques, sous-sous rubriques, etc. d’un secteur de mon site.
      J’ai déja installé votre code et ça marche, sauf que ce serait éffectivement sympa de pouvoir plier et déplier toutes les rubriques.
      1re question : avez-vous avancé sur le problème car j’aimerais vraiment en bénéficier si c le cas.
      2e question : comment faire pour ne lister que les rubriques d’1 seul secteur ?

      Merci d’avance

    Répondre à ce message

  • Petit mystère. Je rencontre un conflit avec le plugin xspf qui est assez étrange. En effet, j’ai une page sommaire qui ne doit pas contenir de menu et des pages rubrique et article qui en contiennent un. Donc pas d’appel à accordéon dans sommaire, mais appel dans les autres. Et bien dans sommaire, mon rotator xspf ne marche pas et dans les autres si. Et si j’inclus le menu dans sommaire, rotator se met à marcher... Donc il semble quu’il y ait un couac quelque part. Pourquoi si les deux plugins sont activés, xspf requiert l’appel au menu pour fonctionner alors que ce n’est pas lié à la base ?? Si on désactive le menu, pas de problème avec xspf...
    Merci pour votre aide.
    Yann

    Répondre à ce message

  • un problème d’espacement vertical survient sous ie (un bon 10px) que l’on peut contourner en ajoutant style=« display : inline ; »

    Répondre à ce message

  • 4

    Bonjour,

    est-ce que quelqu’un peut m’indiquer comment un titre d’article peut être mis en valeur avec #EXPOSE avec ce menu.

    je cale misérablement là-dessus depuis un bon bout de temps.

    merci
    dd

    • Pour mettre l’article en cours d’affichage en évidence avec #EXPOSE il faut transmettre id_article au squelette du menu lors de son inclusion depuis le squelette parent.

      Bon courage ++

    • merci pour la réponse rapide.
      en fait cette inclusion est là.Par exemple

      <INCLURE{fond=inc-menu-accordeon}{id_article}{id_rubrique}>

      mais le problème est (si j’ai bien vu) que la class attachée aux <li> des articles dans le menu est .art que l’article soit actif ou non.

      dd

    • Bonsoir,

      J’ai ajouté cette fonctionnalité au plugin. Il suffit d’inclure le menu comme ceci depuis le squelette article.html :

      <INCLURE{fond=inc-menu-accordeon}{id_rubrique}{id_article}>

      L’article en cours d’affichage sera ainsi mis en évidence grâce à la classe « on ».

    • Bonjour,

      Je viens de tester avec la version du 16/02/08 sur spip zone et je n’ai toujours pas de style « on » qui s’applique aux articles (option articles du menu).

      Je dois mal m’y prendre.

      merci

    Répondre à ce message

  • Tres chouette plugin qui est facilement personnalisable au niveau du look !

    Cependant, j’aimerais le modifier pour qu’il n’affiche que les rubriques/sous rubriques / articles du secteur en cours, et je dois avouer que je sèche.

    Je suppose que celà doit se jouer au niveaux des parametres à passer, mais ou exactement ?

    Répondre à ce message

  • 1

    Bonjour,
    ce menu est super !

    Seule limitation : il se limite à un seul niveau de rubriques à l’intérieur des secteurs.
    Y a t il moyen à ton avis de l’adapter pour aller plus profond ?

    Quand à la question du clic sur les secteurs que tu évoques, la solution retenue est parfaite, surtout avec l’option « déplier sur hover : ».

    • A plusieurs niveaux ca mintéresserait aussi ;)
      Magnifique plugin

    Répondre à ce message

  • belantik

    Bonjour,
    Merci pour ce menu qui est très facile à utiliser. J’ai néanmoins un problème : je liste les articles de mes rubriques et sous rubriques et je voudrais que le lien de mon article en cours soit en gras ... j’ai fait un

    « INCLURE fond=inc-menu-accordeon id_rubrique id_article »

    (avec la bonne syntaxe) dans mon squelette article mais rien y fait, j’ai bien tous mes articles dépliés mais l’article en cours n’est pas en gras ! (la rubrique en cours, elle, est en gras)

    Que faire ?!! Une idée ?
    Merci beaucoup !

    Répondre à ce message

  • michael

    Bonjour,

    j’utilise le menu accordéon avec bonheur sur un site en cours de développement. Je rencontre cependant deux difficultés.

    1. le mouseover agit immédiatement au survol d’une rubrique ; serait-il possible de le temporiser (0,3 sec par exemple) ?

    2. la mise en valeur dans le menu (gras ?) de la rubrique et ou de l’article affiché ne fonctionne pas. Une piste sur le sujet ? (J’ai bien inséré les appels idoines dans les squelettes rubrique.html et article.html...)

    Merci d’avance !

    Site de test : http://www.elephantadventures.com/e...

    Répondre à ce message

  • 3

    et dispose t on d’un solution simple pour que le depliement/repliement se fasse (avec un petit delai) juste avec un MouseOver et non un clic...

    Des idées ?

    • Oui, dans menu_accordeon_call.js, il faut ajouter
      event : ’mouseover’

      Ce qui donne :

      jQuery().ready(function()

      jQuery(’#listmenu’).Accordion(

      header : ’a.hac’,

      active : ’a.hac.on’,

      event : ’mouseover’

      ) ;

      ) ;

      D’autres options sont décrites ici :

      http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

    • super merci pour la réponse.

      Elle n’aurait pu ne jamais venir. Mais tout vient à point à qui sait attendre.
      Merci.

    • Voilà, cette fonctionnalité est ajoutée au plugin. Vous pouvez maintenant choisir le type d’évènement qui déclenchera le dépliement du menu (survol ou clic). Ce réglage est accessible sur la page de configuration du plugin.

      ++

    Répondre à ce message

  • 1

    Bonjour, ton plugin correspond bien à ce que je voulais, merci pour la contrib.

    Je traville sur un site en 3 langues et j’ai déjà établi des correspondances selon cette méthode (ça suppose l’orgainsation qu’il décrit, on mélange pas)

    Pour n’appeler que les rubriques qui sont dans la langue de la page en cours. J’ai eu recours à ça :

    <BOUCLE_rubriques(RUBRIQUES) {racine} {lang=#LANG} {par num titre, titre}><!--modif lang-->
    		<li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|supprimer_numero|couper{80})]</a>
    			<B_sous_rubriques>
    			<ul>
    				<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
    					<li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero|couper{80})]</a></li>
    				</BOUCLE_sous_rubriques>
    			</ul>
    			</B_sous_rubriques>
    		</li>
    </BOUCLE_rubriques>

    Il faut donc juste penser à rajouter outre {lang=#LANG}, le filtre [(#TITRE|supprimer_numero)] qu’Arno décrit très bien même pour un débutant, j’ai mis le nez dans SPIP y’a un mois.
    Ca concerne le inc-accordeon-rub.html pour l’instant ...


    ... Par ce que je suis un peu empêtré pour faire afficher (avec le squelettes article.html) le même accordéon qui renverrait cette fois les articles.

    j’ai bien essayé de dupliquer le dossier, de le renommer et de régler l’accordéon bis pour qu’il renvoie les articles, mais dans mon interface de gestion les 2 plugins s’apellent pareil et je peux en cocher qu’un des deux.

    • Je viens de réessayer en remplacant à chaque fois le nom accordéon par clapeton (c’est comme ça qu’on dit en occitan, ça aide pour renommer un fichier ;-)
      mais impossiblede faire afficher les articles

    Répondre à ce message

  • 2

    Bonjour,

    Merci bcp pour ce petit bijou.

    J’essaye d’adopter ce menu pour un site et j’aimerai bien avoir votre validation aux étapes que a suivre et me corriger si je passe a coté de quelque chose.
    Le site est composé de 3 catégories : 1 globale et 2 autres selon les branches d’activité. Chaque catégorie a ses propres codes couleurs qu’il faut bien sur les présenter aussi dans le menu.
    J’ai crée les 3 squelette pour chaque rubrique (rubrique-2.html, rubrique-3 ..) et quand je ferai appel au <INCLURE{fond=inc-menu-accordeon}{id_rubrique}>
    bien sur il va m’injecter le menu accordéon tel qu’il est par défaut, et/ou avec le changements que je vais porter dans le css.
    Pour « multiplier » les instances de ce plugin est-ce que je doit porter simplement les changements suivants ? :
    -  dupliquer le inc-menu-accordeon.html en inc-menu-accordeon-2.html et inc-menu-accordeon3.html
    -  changer dans les fichiers dupliqué les id par defaut #listmenu en autre chose (example : #listmenu2 #listmenu3)
    -  styler simplement #listmenu2 et #listmenu3 dans menu_accordeon.css

    Est-ce que c’est la démarche a suivre.
    Je m’excuse d’avance si j’ai tout compris a traver mais ça fait uniquement 2 jours que j’ai mis le nez dans spip et j’ai encore plein de choses a apprendre quand a la logique de fonctionnement.

    Merci
    FireWolf

    • Bonjour,

      Pour styler de façons différentes le menu suivant la rubrique il y a une solution bien plus simple basée entièrement sur les CSS. Il te suffit d’attribuer une #id ou une .classe différente à chaque balise body de tes squelettes de rubrique. Par exemple :

      rubrique-2.html = <body class="rub2">
      rubrique-3.html = <body class="rub3">
      ...

      Ensuite, dans tes feuilles de styles, tu pourras cibler le menu suivant la rubrique comme ceci :

      .rub2 #listmenu { tes styles pour le menu de la rubrique 2 ici }
      .rub3 #listmenu { tes styles pour le menu de la rubrique 3 ici }
      ...

      Et voilà :) Bon courage ++

    • Merci bcp pour la réponse rapide BB :)

      Si simple que ça ?!! loul !! Je vais tester tout ça.

      Communauté + SPIP + CSS = ç a d é c h i r e.

      Je crois avoir finalement trouvé le CMS de mes rêves.

      ++++

    Répondre à ce message

  • bonjour,
    je suis encore tout ému .. après l’installation de ce plug .... c’est magique
    juste une précision qui m’avait échappé, il faut vaiment que les rubriques soient au 1er niveau et non pas dans une architecture du type (racine/monsite/rubrique …) si ca peut éviter à certain de s’arracher les cheveux ……

    Juste un petit souci pour moi … est il possible d’envisager que la rubrique s’affiche dès le 1er clic ? car pour le moment le 1er clic déplie le menu et le second valide le lien vers la rubrique, peut on faire d’une pierre deux coups et afficher le contenu de la rubrique en meme temps que l(on déplie le menu ?

    merci de votre aide
    jacques

    Répondre à ce message

  • 1

    Bonjour,

    Très sympathique plugin !

    Mais est-il possible de remplacer les titres des rubriques par leurs logos ?

    Merci pour votre aide

    Dan

    • Bonsoir,

      Oui c’est possible en modifiant la ligne 2 du fichier inc-menu-accordeon-art.html :

      [(#TITRE|couper{80})]

      à remplacer par ceci :

      [(#LOGO_RUBRIQUE||inserer_attribut{alt,#TITRE})]

      Il suffit d’effectuer les mêmes modifications dans le fichier inc-menu-accordeon-rub.html (lignes 2 et 6) si ton menu est configuré pour lister les rubriques et sous-rubriques du site.

      Il faudrait aussi prévoir le fait que le logo de la rubrique soit trop grand et appliqué le filtre image_reduire au logo par sécurité. Autre truc à prévoir, le cas où il n’y aurait pas de logo pour une rubrique. C’est faisable avec un filtre de test qui afficherait le titre de la rubrique si la rubrique n’a pas de logo.

      Bon courage ++

    Répondre à ce message

  • 3

    Bonjour,

    Le plugin fonctionne avec une version 1.9.2 de SPIP et a été testé sous Firefox 2 et Internet Explorer

    j’ai installé ce plugin avec un SPIP 1.9.2b [9381], il fonctionne dans TOUS les environnements testés (browsershots.org) SAUF MSIE 5, 5.5 et 6.0.

    j’ai dabord essayé de désactiver ma CSS, le phénomène reste inchangé. J’ai également essayé de mettre à jour jquery avec la 1.2.1 (reprise des js et du jquery.js.html du svn de la 1.9.3)

    => rien à faire :`(

    Un grand merci à celui/celle qui me donnera une piste :-)

    • Bonsoir,

      Je viens de tester le plugin sous IE6 et il fonctionne... Quel genre de problème rencontres-tu (erreur d’affichage côté css ou erreur de script) ?

      Bon courage ++

    • bonjour, merci de la réponse ; dans mon cas, sous IE, le menu est déployé en entier à l’ouverture de la page (C pq j’ai d’abord pensé à un pb de CSS), alors que il n’y a aucun pb avec les autres navigauteurs...

    • Bonjour,
      J’ai exactement le même problème que toi.
      Personne n’a une idée ?

    Répondre à ce message

  • 1

    Bonjour ! Très joli plugin, mais si on veut les crayons en même temps, on ne peut pas. Dommage ! A moins que quelqu’un ait une solution ?

    • Sur www.jquery.info on a les deux et ça marche ; mais en effet il faut être délicat quand on clique au milieu d’un div accordéonné. Peut-être faut-il stopper l’événement click/dblclick quand il est traité par le crayon.

    Répondre à ce message

  • 5

    Bonjour et merci pour ce plugin !!
    Je souhaiterais l’utiliser et l’adapter à mes besoins. J’ai essayé de bidouiller quelques lignes de codes, mais rien n’y fait. Je souhaite afficher toutes les sous-rubriques et articles d’un secteur.
    -  Voici le code de mon « inc-menu-accordeon-art.html » :

    <BOUCLE_rubriques(RUBRIQUES) {id_rubrique} {par num titre}{id_secteur != 7}>
    		<li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80})]</a>
    			<B_menu_articles>
    			<ul>
    				<BOUCLE_menu_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
    					<li><a href="#URL_ARTICLE" [ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
    				</BOUCLE_menu_articles>
    			</ul>
    			</B_menu_articles>
    		</li>
    </BOUCLE_rubriques>

    J’insère cette noisette dans mes pages article.html et rubrique.html de la façon suivant : <INCLURE{fond=inc-menu-accordeon}{id_rubrique}>

    -  J’ai essayé aussi ceci qui m’affiche les sous-rubriques, mais qui ne déroulant pas les articles :

    <BOUCLE_rubriques(RUBRIQUES) {id_rubrique} {par num titre}{id_secteur != 7}>
    		<li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80})]</a>
    			<B_sous_rubriques>
    			<ul>
    				<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
    					<li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
    						<B_menu_articles>
    						<ul>
    							<BOUCLE_menu_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
    								<li><a href="#URL_ARTICLE" [ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
    							</BOUCLE_menu_articles>
    						</ul>
    					</B_menu_articles>
    				</BOUCLE_sous_rubriques>
    			</ul>
    			</B_sous_rubriques>
    		</li>
    </BOUCLE_rubriques>
    • Une petite idée SVP ??? ;-(

    • Fabrice

      Alors je sais pas si c’est tard pour te répondre mais voici ma solution :

      <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
      		<li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80})]</a>
      					<ul>
      				<BOUCLE_rub_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
      					<li><a href="#URL_ARTICLE">[(#TITRE|couper{80})]</a></li>
      				</BOUCLE_rub_articles>
      			</ul>
      			<B_sous_rubriques>
      			<ul>
      				<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
      					<li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a></li>
      			<ul>
      				<BOUCLE_srub_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
      					<li><a href="#URL_ARTICLE">[(#TITRE|couper{80})]</a></li>
      				</BOUCLE_srub_articles>
      			</ul>
      				</BOUCLE_sous_rubriques>
      			</ul>
      			</B_sous_rubriques>
      		</li>
      </BOUCLE_rubriques>

      C’est un peu barbare mais ça fonctionne.

    • Fabrice

      Je suis confus. Mon code correct :

      <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
      		<li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80})]</a>
      					<B_menu_articles>
      			<ul>
      				<BOUCLE_menu_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
      					<li><a href="#URL_ARTICLE">[(#TITRE|couper{80})]</a></li>
      				</BOUCLE_menu_articles>
      			</ul>
      			</B_menu_articles>
      			<B_sous_rubriques>
      			
      				<BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
      					<ul><li><a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80})]</a></li>
      				
      				<B_smenu_articles>			
      				<BOUCLE_smenu_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
      					<li><a href="#URL_ARTICLE">[(#TITRE|couper{80})]</a></li>
      				</BOUCLE_smenu_articles>
      			</B_smenu_articles>
      			</ul>
      			</BOUCLE_sous_rubriques>
      			</B_sous_rubriques>
      
      		</li>
      </BOUCLE_rubriques>

      Ca fonctionne pour le template inc-menu-accordeon-rub.html

      j’affiche ainsi :
      Rubrique
      Article (s’il existe)
      Sous rubrique (si elle(s) existe(nt)
      Article de la sous rubrique (si il(s) existe(nt)

    • François Chevalier

      J’aime bien ce menu, et je voulais également afficher toutes les sous-rubriques mais menu non déplié.

      Est-ce possible ?

      Frnaçois

    • Bonsoir,
      merci c’est extra ça fonctionne.
      j’ai juste enlevé pour mon besoin le « hac » dans la boucle :

      <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
      <ul><li><a href="#URL_RUBRIQUE" class="[(#EXPOSE)]">

      pour pouvoir déplier la sous rubrique.

      Par contre ce que je ne comprends pas c’est que la class=« [(#EXPOSE)] » fonctionne pour les rubriques mais par pour les articles

      dd

    Répondre à ce message

  • madbuilder

    bonjour,

    je constate le comportement suivant du plugin :

    • utiliser IE7
    • avoir activé le plugin
    • constater que tout marche bien
    • se connecter à l’interface privée
    • visiter le site publique
    • constater que les menus sont tous dépliés
    • se déconnecter
    • constater que tout est revenu dans l’ordre !!!

    je ne constate le pb que sous IE7

    tester sous Firefox et Opéra sans pb

    Auriez vous une suggestion sur la source du problème

    merci d’avance

    thierry

    Répondre à ce message

  • 2

    bonjour,

    je pense que pour déployer le plugin globalement sur le site, il est plus efficace de copier et renommer inc-menu-accordeon.html en inc-rubriques.html. La copie peut être faite dans le répertoire du plugin ou dans le répertoire squelettes. (mieux pour l’instant dans le répertoire du plugin pour des histoires de sauvegardes qui oublieraient les plugins mais pas le répertoire squelettes.)

    Dans inc-menu-accordeon.html ne vaudrait-il pas mieux utiliser <:accueil_site :> plutôt que Accueil.

    Encore merci pour ce plugin

    • Dans inc-menu-accordeon.html ne vaudrait-il pas mieux utiliser <:accueil_site :> plutôt que Accueil.

      Merci pour l’info, c’est corrigé.

    • merci à toi gars ... c’est super beau ce p’tit plug in ... et merci pour la correction ’<:accueil_site :>’ (ton exemple est chouette, super chouette, class’ à mort ... etc ...).
       ;p
      est-ce que vous pensez qu’il y a un moyen simple de faire une navigation sans recharger le menu de la page avec jquery ?
      en fait je voudrais pouvoir faire un menu en flash qui reste en place en haut dans la div « menu » sans jamais se reloader (il est un peu lourd déjà et je veux en mettre encore plus ;p) ; je voudrais ne changer que le contenu milieu de la page à partir du fil d’ariane ( c’est à dire le sous menu horizontal « accueil > rubrique1 >sous rubrique1 » etc ....) en fonction des evenements clic sur les articles/rubriques en fait ... ajaxifier un peu plus encore le bousin quoi ...
      je commence juste à m’intéresser à ça et mon cerveau fait des bulles là depuis deux semaines .. et le cerveau plug and play que j’ai commandé pour m’upgrader la tete arrive pas ... du coup je pédale dans la semoule à fond (j’ai meme chargé la biblio mootools avant de m’apercevoir que y’avait jquery avec le spip 1,9,2 ... mais faut pas le dire ça en fait, trop la honte) ...
      enfin bref, merci de vos éventuelles réponses et merci encore pour ce menu déroulant qui tue ...

      exemple de mon machin que je voudrais qu’il fasse des trucs comme je l’ai tenté d’expliquer ci-dessus :

    Répondre à ce message

  • 2

    bonjour

    joli travail :)

    que penses tu d’une modification de inc-menu-accordeon-rub.html comme suit :

    [...]
    <li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|couper{80})]</a>
        <BOUCLE_r(BOUCLE_sous_rubriques)></BOUCLE_r>
    </li>
    [...]

    qui permet de découvrir toute l’arborescence de la rubrique

    amicalement

    • Bonjour madbuilder,

      Bonne idée, j’ajouterai prochainement cette option au plugin.

      ++

    • j’ai poursuivi mon étude de cas est j’ai pensé que ne pas afficher de bouton devant les rubriques ne comportant pas de sous rubrique pouvait être une bonne idée, j’ai donc encore un peu fait évoluer le squelette.

      Le résultat est visible ici

      Pour un squelette qui ressemble à :

      <BOUCLE_rubriques(RUBRIQUES) {racine} {lang} {par num titre, titre}>
          <li>
              <B_test>
              <BOUCLE_test(RUBRIQUES) {id_parent} {0,1}>
                  <a href="#_rubriques:URL_RUBRIQUE" class="hac[ (#_rubriques:EXPOSE)]">[(#_rubriques:TITRE|supprimer_numero|couper{80})]</a>
              </BOUCLE_test>
              </B_test>
                  <a href="#URL_RUBRIQUE" class="[(#EXPOSE)]">[(#TITRE|supprimer_numero|couper{80})]</a>
              <//B_test>
              <B_sous_rubriques>
              <ul>
                  <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
                      <li><a href="#URL_RUBRIQUE"[ class="(#EXPOSE)"]>[(#TITRE|supprimer_numero|couper{80})]</a>
                      <BOUCLE_r(BOUCLE_sous_rubriques)></BOUCLE_r>
                      </li>
                  </BOUCLE_sous_rubriques>
              </ul>
              </B_sous_rubriques>
          </li>
      </BOUCLE_rubriques>

      Pour que ce soit beau il faut encore modifier le css en y ajoutant :

      #listmenu a{
      display:block;
      background:transparent url(images/sans_sous_rubrique.gif) left 50% no-repeat;
      text-indent:10px;
      cursor:pointer;
      }

      Et donc ajouter le gif sans_sous_rubrique.gif dans le répertoire image du plugin. C’est juste un gif vide de même dimension que les autres.

    Répondre à ce message

  • 1

    petit probleme assez trivial : je ne comprend pas le css du plugin et n’arrive donc pas a modifier l’apparence des liens.

    un peu d’aide SVP merci

    • Bonjour,

      La feuille de style du plugin ne fait que 16 lignes, mais ce n’est pas la peine d’y toucher. Tu peux très bien personnaliser le menu depuis un autre fichier css.

      Il faut juste savoir que le menu est une liste avec dont l’id « listmenu », que les liens qui activent le depliement portent la classe « hac » et que l’article ou la rubrique en cours porte la classe « selected ».

      Bon courage ++

    Répondre à ce message

  • Bonjour,
    Justement j’ai commencé à tester ce plugin aujourd’hui.

    Pour pouvoir afficher dans le menu les secteurs, leurs sous-rubriques et les articles des secteurs j’ai modifié le fichier inc-menu-accordeon-art.html :

    <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}{id_rubrique!=44}>
    <a href="#URL_RUBRIQUE" class="hac[ (#EXPOSE)]">[(#TITRE|couper{80}|supprimer_numero)]</a>
    <B_menu_articles>
    <ul>
    <BOUCLE_menu_articles(ARTICLES) {id_rubrique} {par num titre, titre}{doublons}>
    <li><a href="#URL_ARTICLE" [ class="art(#EXPOSE)"]>[(#TITRE|couper{80}|supprimer_numero)]</a></li>
    </BOUCLE_menu_articles>
    </ul>
    </B_menu_articles>
    <B_sous_rubriques>
    <ul>
    <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
    <li><a href="#URL_RUBRIQUE"[ class="art(#EXPOSE)"]>[(#TITRE|couper{80}|supprimer_numero)]</a></li>
    </BOUCLE_sous_rubriques>		
    <B_sousmenu_articles>
    <BOUCLE_sousmenu_articles(ARTICLES) {id_rubrique} {par num titre, titre}{doublons}>
    <li><a href="#URL_ARTICLE" [ class="art(#EXPOSE)"]>[(#TITRE|couper{80}|supprimer_numero)]</a></li>
    </BOUCLE_sousmenu_articles>
    </B_sousmenu_articles>				
    </ul>
    </B_sous_rubriques>	
    </BOUCLE_rubriques>

    Je n’ai pas encore tout testé . Ca me semble fonctionnel comme ça aussi même si je me bat avec la css pour avoir les liens actifs exposés.

    Pour les liens pour ouvrir les secteurs il me semble que la solution actuelle est la meilleure. En attendant une solution plus évidente j’ai ajouté sur le lien du secteur un title=« Double clic pour afficher tout le contenu de la rubrique »

    Merci pour ce plugin facile à installer (j’ai seulement eu du mal à trouver le plugin complémentaire cfg)

    dd

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom