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

  • 5
    Arno

    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>
    • Arno

      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

    • dd

      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

    • b_b

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

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

    • edouard

      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
    madbuilder

    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

    • b_b

      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
    naomed

    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

    • b_b

      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

  • dd

    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