We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 30672
    • 180 Posts
    Bonjour à tous,

    j’ai déjà posté sur le support général du forum (en anglais) concernant la réalisation d’un menu déroulant (voir ici : http://modxcms.com/forums/index.php/topic,51756.0.html)

    j’ai bien réussi à créer un menu déroulant, avec 3 niveaux possibles.

    mon souci est le suivant : je ne peux afficher du contenu que pour les pages enfants (sans sous-page donc).
    dès que j’ai une page qui sert de "dossier" en quelque sorte, je ne peux pas afficher son contenu.

    Avez-vous déjà dû construire un menu de la sorte? Y a t il une solution ?
    je suis même prêt à changer totalement de menu si nécessaire... smiley

    merci bcp de votre aide !
      • 36404
      • 307 Posts
      Salut,

      si par "je ne peux pas afficher son contenu" tu veux dire que ça met bien l’item dans le menu mais sans un lien dessus, il y a des chances que ça vienne du chunk que tu utilises pour le $parentRowTpl

      si dans le chunk que tu mets dans ce parentRowTpl tu mets qque chose du genre
      <li[+wf.classes+]>
          <a href="[+wf.link+]" title="[+wf.title+]"[+wf.classes+]>[+wf.linktext+]</a>
          [+wf.wrapper+]
      <li>


      les items de menus qui sont des conteneurs seront aussi des liens

      have swing
        réfléchir avant d'agir
        • 30672
        • 180 Posts
        salut virtualgadjo!

        merci de me filer un coup de main!

        j’ai essayé ton code, il n’y a pas de changement malheureusement...

        pour y voir plus clair voici les éléments que j’utilise :

        chunk :

        acc-folder :

        <li[+wf.classes+]>
        <a title="[+wf.title+]" href="#">[+wf.linktext+] »</a>
        [+wf.wrapper+]
        </li>

        que j’ai donc remplacé par ton code :

        <li[+wf.classes+]>
        <a href="[+wf.link+]" title="[+wf.title+]"[+wf.classes+]>[+wf.linktext+] »</a>
        [+wf.wrapper+]
        <li>

        acc-inner:

        <ul class="acitem">
        [+wf.wrapper+]
        </ul>

        acc-outer:

        <ul class="menu collapsible">
        [+wf.wrapper+]
        </ul>


        pour les pages qui sont des contenants, j’ai ajouté rel="category" dans le champs "attributs des liens".

        et l’appel du Wayfinder :
        [[Wayfinder? &startId=`0` &outerClass=`menu` &hereClass=`expand` &selfClass=`active` &categoryFoldersTpl=`acc-folder` &innerTpl=`acc-inner`]]






        pour être plus clair, ça met un lien, mais il reste sur la même page (avec le # dans le chunk, normal, mais même avec ton code ça change pas).


        pour finir, si tu connais un autre type de menu qui me permettrait de faire ce que je veux, je veux bien tout refaire smiley

        merci de ton aide, c’est très appréciable!

        A+
          • 36404
          • 307 Posts
          curieux que ça ne t’affiche pas de lien, tu as regardé dans le source pour voir ce que ça te sort comme code ?

          sinon, pour faire exactement ce que tu décris, voilà comment j’ai procédé

          mon appel wayfinder
          [!Wayfinder? &startId=`16` &config=`aspimLeftMenu`!]

          comme tu peux le voir, histoire de me simplifier la vie, j’ai préféré l’option fichier de config (aspimLeftMenu.config.php dans le dossier assets/snippets/wayfinder/configs) à celle des chunks multiples smiley
          et, dans le fichier en question
          <?php
          
          	$level        = 3;
          	$selfClass    = "selecLeft";
          	$rowClass     = "leftNavItem";
          
          
          	$outerTpl = "
          	@CODE:<ul>
          	[+wf.wrapper+]
          	</ul>";
          	
          	$rowTpl = '@CODE:<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]"[+wf.classes+]>[+wf.linktext+]</a>[+wf.wrapper+]</li>';
          
          	$parentRowTpl = '@CODE:
          	<li[+wf.classes+]>
          	<a href="[+wf.link+]" title="[+wf.title+]"[+wf.classes+]>[+wf.linktext+]</a>
          	[+wf.wrapper+]
          	</li>';
          
          	$innerTpl = '@CODE:
          	<ul>
          	[+wf.wrapper+]
          	</ul>';
          ?>

          donc, comme tu peux le voir, menu sur 3 niveaux tout pareil smiley du coup, est-ce que ça ne viendrait pas de &categoryFoldersTpl au lieu de $parentRowTpl ? itou, à priori, il te faudrait un $rowTpl pour les liens qui ne sont pas des liens de conteneur

          bien sûr, tu peux faire exactement la même chose en utilisant des chunks et en mettant leur nom dans l’appel Wayfinder (l’utilisation d’un fichier externe me rassure aussi dans un autre sens, c’est toujours ça que mon client n’ira pas modifier par erreur en se loguant comme admin... smiley)

          Sinon, honnêtement, je crois que Wayfinder est la solution royale pour se faire des menus en tous genres avec MODx (à un ou deux petits menus en dur près pour lesquels il n’est pas utile), mais t’inquiète, ça devrait marcher, teste le coup des row tpl et parentRowTpl

          Have swing
            réfléchir avant d'agir
            • 30672
            • 180 Posts
            je vais tester tout ça !

            je te remercie encore et te tiens au courant ! smiley
              • 30672
              • 180 Posts
              re!

              j’ai testé ton code dans un nouveau modèle de page.
              ça fonctionne, mais tous les documents sont au même niveau dans mon menu.
              je n’ai plus les effets accordéons qui cachaient/dévoilaient les sous-menus...

              je piétine un peu ! grin
                • 30672
                • 180 Posts
                le problème doit venir des css qui ne sont pas encore créés.
                comment fais-tu l’appel des css? et comment associer différents styles aux types de niveau?
                  • 36404
                  • 307 Posts
                  Salut,

                  désolé, un peu ailleurs ces derniers jours... smiley

                  alors, oui, le problème doit venir des css effectivement. Dans le code, les classes appliquées par wayfinder sont dans le placeholder [+wf.classes+]
                  méfie-toi, comme tu as pu le voir, parfois je les ai mis sur les li parfois sur le a, ça peut avoir une incidence sur la façon dont tu gère le js

                  tu peux aussi mettre des class css en dur dans les ul des outer et inner templates, utiles pour "accordéonner" des menus en js.

                  comme je ne sais pas ce que tu utilise pour l’accordéon je ne peux pas aller beaucoup plus loin mais, ce que je peux te dire c’est que, aussi bien en css qu’en js, il faut bosser par héritage et niveau successifs. Par ex, si ton menu est dans un div qui porte disons, l’identifiant "menu", très original n’est-ce pas smiley, tu peux attaquer les niveaux successifs de ul par
                  #menu ul
                  #menu ul ul
                  en ajoutant les classes qui vont bien ça te permet d’aller jusqu’à n niveau sans souci
                  je fais ça, sans accordéon (juste en jouant sur la visibilité des sous-menus) avec l’exemple live que je t’ai passé et ça marche sans souci.

                  par exemple
                  #menu ul li ul { display: none; }
                  #menu ul li.selecLeft ul { display: block; }

                  (d’où l’attribution de la classe à la li plutôt qu’au lien dans ce cas, mais, d’ailleurs, rien ne t’empêche de la mettre au deux)

                  en js, le principe serait le même, je ne vais pas t’embrouiller avec un appel js qui serait mootools dans mon cas sans savoir la librairie que tu utilises smiley

                  @ plouch

                  Have swing
                    réfléchir avant d'agir
                    • 30672
                    • 180 Posts
                    merci gadjo!

                    je dois dire que je suis un peu emm... avec ce menu.
                    je dois présenter un résultat en fin de journée sans faute et ça coince toujours...

                    l’effet accordeon, je peux m’en passer.

                    les points importants :

                    1. quand on clique sur un lien de premier niveau :
                    - ça mène à un contenu (donc changement de page)
                    - ça dévoile les sous-menus.


                    voilà, alors si tu as un truc tout fait qui marche comme ça, que je peux mettre en forme avec des css, je suis prenant.

                    Je sais que c’est horrible ce que je viens de demander, c’est pas mon genre habituellement, mais là je suis désespéré.... :’(

                    merci à toi pour ton aide!
                      • 36404
                      • 307 Posts
                      :) ça arrive de temps en temps qu’on bute sur un truc et pas du tout au bon moment...

                      voilà comment j’ai fait côté css pour masquer les sous-menus quand on est pas dans la rubrique concerné et les faire apparaître quand c’est le cas
                      (c’est juste la partie css qui cache ou montre les listes de niveau 2 et 3)
                      #TCleft li ul,
                      #TCleft li.active ul li ul {
                      	display: none;
                      }
                      #TCleft li.active ul,
                      #TCleft li.active ul li.active ul {
                      	display: block;
                      }
                      

                      tu l’auras deviné, TCleft est l’id du div qui contient le menu.
                      Comme tu peux le voir, ça repose sur la class "active" mise par wayfinder et que j’ai placés sur les li plutôt que les a.
                      Avec ça, normalement, ça devrait fonctionner, il ne te reste plus qu’à styler les listes et liens

                      je repasse tout à l’heure pour voir si tu t’en est sorti smiley

                      Have swing
                        réfléchir avant d'agir