SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Navigation > Menus dépliants > Menu Accordéon

Plugin Menu Accordéon

mardi 26 juin 2007, par bb. Dernier ajout dimanche 16 septembre 2007


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

Voir en ligne : Ce plugin est basé sur le script jQuery Accordionde Jörn Zaefferer.


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.

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 dans la page d’installation des plugins. Cette page permet de paramétrer 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.

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


Répondre à cet article

  • Plugin Menu Accordéon

    4 décembre 2007 18:56, par 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 ?

    Répondre à ce message

    Retour au début des forums

  • un seul clic ?

    24 novembre 2007 17:51, par 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

    Retour au début des forums

  • Remplacer les titres des rubriques par un logo ?

    21 novembre 2007 18:18, par Dan

    Bonjour,

    Très sympathique plugin !

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

    Merci pour votre aide

    Dan

    Répondre à ce message

    • Remplacer les titres des rubriques par un logo ? 21 novembre 2007 23:37, par bb

      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

    Retour au début des forums

  • Plugin Menu Accordéon et MSIE 6

    15 octobre 2007 21:05, par 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 :-)

    Répondre à ce message

    Retour au début des forums

  • Accordéon ou crayons, il faut choisir !

    28 octobre 2007 08:59, par 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 ?

    Répondre à ce message

    Retour au début des forums

  • Afficher sous-rubriques+articles d’une rubrique

    24 juillet 2007 15:06, par 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>

    Répondre à ce message

    • Afficher sous-rubriques+articles d’une rubrique 27 juillet 2007 09:44, par Arno

      Une petite idée SVP ??? ;-(

      Répondre à ce message

      • Afficher sous-rubriques+articles d’une rubrique 28 août 2007 16:36, par 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.

        Répondre à ce message

        • Afficher sous-rubriques+articles d’une rubrique 28 août 2007 17:59, par 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)

          Répondre à ce message

          • Afficher sous-rubriques+articles d’une rubrique 26 septembre 2007 11:12, par 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

            Répondre à ce message

          • Afficher sous-rubriques+articles d’une rubrique 10 octobre 2007 19:07, par 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

    Retour au début des forums

  • Plugin Menu Accordéon et .on

    15 septembre 2007 18:31, par dd

    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

    Répondre à ce message

    • Plugin Menu Accordéon et .on 15 septembre 2007 18:43, par bb

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

      Répondre à ce message

      • Plugin Menu Accordéon et .on 15 septembre 2007 19:17, par dd

        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

        Répondre à ce message

        • Plugin Menu Accordéon et .on 16 septembre 2007 18:30, par bb

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

          Répondre à ce message

    Retour au début des forums

  • bizarrerie IE7

    15 juillet 2007 17:17, par 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

    Retour au début des forums

  • Plugin Menu Accordéon - en passant

    9 juillet 2007 16:33

    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

    Répondre à ce message

    • Plugin Menu Accordéon - en passant 9 juillet 2007 16:49, par bb

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

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

      Répondre à ce message

      • Plugin Menu Accordéon - en passant 10 juillet 2007 00:03, par 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

    Retour au début des forums

  • Plugin Menu Accordéon

    6 juillet 2007 18:24, par 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

    Répondre à ce message

    • Plugin Menu Accordéon 9 juillet 2007 15:33, par bb

      Bonjour madbuilder,

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

      ++

      Répondre à ce message

      • Plugin Menu Accordéon 9 juillet 2007 16:25

        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

    Retour au début des forums

0 | 25



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et fonctionnement SPIP-Contrib | SPIP | L'autre.net