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

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