Plugin Menu Accordéon

Publié le : 26 juin 2007 – Dernière modification le 21 décembre 2021 – par b_b – 87 commentaires

1
2
3
4
5
12 votes

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

[1] inc-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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

46 discussions

  • 1
    JLuc

    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
    Diego

    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/

    • Diego

      super merci pour la réponse.

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

    • b_b

      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
    Mars

    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.

    • Mars

      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
    FireWolf

    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

    • b_b

      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 ++

    • FireWolf

      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

  • jacques

    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
    Dan

    Bonjour,

    Très sympathique plugin !

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

    Merci pour votre aide

    Dan

    • b_b

      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
    lio

    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 :-)

    • b_b

      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 ++

    • lio

      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...

    • sam

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

    Répondre à ce message

  • 1
    gigi

    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 ?

    • Fil

      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

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