We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 23360
    • 258 Posts
    Bonjour,
    J’ai un truc de particulier a faire. Quoi particulier pour moi smiley
    Je me relance dans MODx avec la derniere version.

    Je fais donc un site qui a un menu à sa gauche. Le menu contient 8 éléments.

    En haut je dois avoir un deuxieme menu mais uniquement 3 des éléments sont visible.

    Mon premier menu est fait avec wayfinder
    [[Wayfinder? &startId=`0` &rowClass=`menu` &outerClass=`menu`]]


    Mes problemes sont les suivants:
    1) Comment puis-je reutilisé le wayfinder et dire que la page 3 s’affiche dans le menu de gauche mais pas dans le menu du haut???
    2) Comment puis-je utiliser des <div> au lieu de <li> pour le menu du haut, car, un élément du menu est constitué d’un container qui contient une image, et un bas de ce container, j’en ai un autre (plus fin) qui affiche le texte cliquable (le lien)

    Pour info, voci le code de mon menu du haut:
      <div id="menu-intro">
      	<div id="shiatsu" class="menu-intro">
        	<div class="text"><a href="#" class="menu-link" target="_parent" title="Shiatsu">Shiatsu</a></div>	
        </div>
        <div id="reboutage" class="menu-intro">
        	<div class="text"><a href="#" class="menu-link" target="_parent" title="Reboutage">Reboutage</a></div>
        </div>
        <div id="declenchement" class="menu-intro">
        	<div class="text"><a href="#" class="menu-link" target="_parent" title="Declenchement">Déclenchement</a></div>
        </div>
      </div>
    
    

    Le css l’affiche à l’horizontal (avez vous besoin du CSS?)

    Es-ce que Template parameter pourrait m’aider?
    [+wf.wrapper+]


    Le truc c’est que je n’ai jamais utilisé ceci. Auroez-vous un exemple a me donner pour me lancer dans la bonne direction?

    Mille mercis pour vos lumières
      • 23360
      • 258 Posts
      J’ai trouvé mais j ai encore un tout petit probleme

      Voici la solution:
      J’ai créé deux CHUNCK
      1) menuIntro
      2) menuIntroUl

      1) {{menuIntro}}
      <div [+wf.id+] class="menu-intro">
      <div class="text">
      <a href="[+wf.link+]" title="[+wf.title+]" class="menu-link">[+wf.linktext+]</a>
      [+wf.wrapper+]
      </div>
      </div>

      2) {{menuIntroUl}} Celui sert uniquement a supprimé les <ul>
      [+wf.wrapper+] 


      Dans ma template j’appelle ceci comme cela:
      [[Wayfinder? &startId=`0` &selfClass=`active` &rowTpl=`menuIntro` &outerTpl=`menuIntroUl` &rowIdPrefix=`menu-intro-`]]
      


      Dans cette solution, il y a truc que je ne trouve pas très propre car comme je l’ai dit, j’ai besoin d’afficher 3 élément du menu sur le 8.
      Le wayfinder, ci-dessus, va généré ceci:
      <div  id="menu-intro-2" class="menu-intro">
      <div class="text">
      <a href="/accueil.html" title="Accueil" class="menu-link">Accueil</a>
      	
      </div>
      </div>
      <div  id="menu-intro-12" class="menu-intro">
      <div class="text">
      <a href="/shiatsu.html" title="Shiatsu" class="menu-link">Shiatsu</a>
      	
      </div>
      </div>
      <div  id="menu-intro-22" class="menu-intro">
      
      <div class="text">
      <a href="/reboutage.html" title="Reboutage" class="menu-link">Reboutage</a>
      	
      </div>
      </div>
      <div  id="menu-intro-32" class="menu-intro">
      <div class="text">
      <a href="/declenchement.html" title="Déclenchement" class="menu-link">Déclenchement</a>
      	
      </div>
      </div>
      <div  id="menu-intro-42" class="menu-intro">
      <div class="text">
      <a href="/contact.html" title="Contact" class="menu-link">Contact</a>
      	
      </div>
      </div>
      <div  id="menu-intro-52" class="menu-intro">
      <div class="text">
      <a href="/liens.html" title="Liens" class="menu-link">Liens</a>
      	
      </div>
      

      Dans mon cas, j’auniquement besoin des id
      1) menu-intro-12
      2) menu-intro-22
      3) menu-intro-32

      Donc dans mon CSS j’ai appliqué un
      (x étant les autres page ..-42 et ..-52)
      #menu-intro-x2{display:hidden}



      Je trouve pas trop propre, mais le tout s’affiche bien et c’est ce que j’ai trouvé. Archff.


      Mon dernier problème est le suivant


      Pour mon menu principal (celui qui les 8 éléments affichés), j’ai ajouté a mon wayfinder ceci
      &selfClass==`active`
      ce qui permet d’avoir une class="active" pour le menu actif (ou sélectionné)
      Ce qui donne pour affiché mon menu principal: (attention, ne pas confondre avec le premier wayfinder que j’ai collé ci-dessus)
      [[Wayfinder? &startId=`0` &rowClass=`menu` &outerClass=`menu` &selfClass==`active`]]
      


      ca marche très bien!!!

      Mais pour mon menu du haut, donc celui qui doit afiché 3 éléments sur 8, j’ai aussi ajouté ceci
      &selfClass==`active`

      ce qui donne ceci:
      [[Wayfinder? &startId=`0` &selfClass=`active` &rowTpl=`menuIntro` &outerTpl=`menuIntroUl` &rowIdPrefix=`menu-intro-`]]

      mais alors la, ca marche pouas >:(
      j’ai pas de classe "active" dans mon <div id="menu-intro-x32" class="menu-intro"> par exemple

      avez vous une idée pourquoi?
      Comment puis afficher une classe pour un menu activ alors que j’utilise de chunck?

      Mercis
        • 34001
        • 428 Posts
        Jean-Christophe B. Reply #3, 17 years ago
        Bonsoir,

        Pour un menu, utiliser des listes à la place des div aurait été sémantiquement bien plus approprié. Ensuite, rien ne t’empêche d’insérer des images (ainsi que des titres, des paragraphes, etc.) à l’intérieur d’un élément «li».
        Je fais donc un site qui a un menu à sa gauche. Le menu contient 8 éléments.
        En haut je dois avoir un deuxieme menu mais uniquement 3 des éléments sont visible.
        Le paramètre &excludeDocs permet de retirer des documents précis du menu.
        Sinon, tu peux également décocher la case «Afficher dans le menu» des documents que tu veux retirer de la liste (sauf bien entendu si tu as besoin de ces documents dans un autre menu).

        j’ai pas de classe "active" dans mon <div id="menu-intro-x32" class="menu-intro"> par exemple
        Dans le chunk menuIntro, il manque un de ces deux placeholders qui génèrent les classes liées à l’élément de menu:


        • [+wf.classes+]: inclut la déclaration class=" "
        • [+wf.classnames+]: affiche uniquement les noms des classes

        Si je reprends ton chunk, cela donnerait donc:
        <div [+wf.id+] class="[+wf.classnames+] menu-intro">
        <div class="text">
        <a href="[+wf.link+]" title="[+wf.title+]" class="menu-link">[+wf.linktext+]</a>
           [+wf.wrapper+]
        </div>
        </div>
          Intégrateur web freelance
          • 23360
          • 258 Posts
          Salut merci pour ta repose,

          Pour la premiere solution
          &excludeDocs

          ca marche nikel, merci

          Pour la deuxième, je dois m’excusé car j’ai faussement décris mon problème. J em relève des plumes car j’ai réalisé ceci une fois sous les draps smiley

          En fait pour le menu d’en heut, celui donc qui a trois élément d’afficher sur les 8, ils ont tous une image de fond en plus du texte. Quand le menu est active, l’image change alors que dans le menu principale, il n’y pas d’image mais le texte devient gris.

          Donc pour le menu pricipla le
          &selfClass==`active`

          est adéquat.

          Par contre pour le menu d’en haut, il n’y a pas la meme image pour chaque des trois menu.
          Pour le menu 1, l’image est homme.jpg et home_active.jpg
          Pour le menu 2, l’image est femme.jpg et femme_active.jpg
          Pour le menu 3, l’image est enfant.jpg et enfant_active.jpg

          et ca c’est les ids qui les définisse
          #menu-intro-12{}
          #menu-intro-22{}
          #menu-intro-32{}

          Donc si j’utilise
          &selfClass==`active`

          Il va me mettre la meme classe pour l’un des 3 menu actif.

          En fait il faudrait agir sur les id
          #menu-intro-12{}
          #menu-intro-22-active{} <= par exemple quand ce menu est actif
          #menu-intro-32{}
          ...
          <div  id="menu-intro-22-active" class="menu-intro">
          
          <div class="text">
          <a href="/reboutage.html" title="Reboutage" class="menu-link">Reboutage</a>
          	
          </div>
          </div>
          ...
          


            • 34001
            • 428 Posts
            Jean-Christophe B. Reply #5, 17 years ago
            En l’occurence, ce n’est qu’un problème de CSS.

            Partons sur mon idée de départ. Voici à quoi va ressembler le code HTML de ton élément de menu:
            <div  id="menu-intro-22" class="menu-intro active">
            
            <div class="text">
            <a href="/reboutage.html" title="Reboutage" class="menu-link">Reboutage</a>
            	
            </div>
            </div>
            


            Et voici le code CSS:
            /* Etat normal */
            div#menu-intro-22 {
                background: url(images/bg-menuintro22.jpg);
            }
            /* Etat actif */
            div#menu-intro-22.active {
                background: url(images/bg-menuintro22_active.jpg);
            }
            


            Tu as donc tout ce qu’il te faut pour cibler les états «normal» et «actif» de chacun de tes éléments de menu. wink
              Intégrateur web freelance
              • 23360
              • 258 Posts
              ha oui en effet, et je continue ainsi
              [quote]/* Etat normal */
              div#menu-intro-12 {
                  background: url(images/bg-menuintro12.jpg);
              }
              /* Etat actif */
              div#menu-intro-12.active {
                  background: url(images/bg-menuintro12_active.jpg);
              }
              
              /* Etat normal */
              div#menu-intro-32 {
                  background: url(images/bg-menuintro32.jpg);
              }
              /* Etat actif */
              div#menu-intro-32.active {
                  background: url(images/bg-menuintro32_active.jpg);
              }[/quote]


              mais je vois un petit probleme. Dans le cas on le menu est actif, le container (<div>) aura ’deux effets", le premier par la class 1) #menu-intro-22 qui affiche l’image de fond bg-menuintro22.jpg
              2) par la class .active (div#menu-intro-32.active) qui affiche l’image de fond bg-menuintro22-active.jpg

              un espece de conflit.

              Non?
                • 34001
                • 428 Posts
                Jean-Christophe B. Reply #7, 17 years ago
                Oui, c’est tout à fait ça. smiley

                Il n’y aura pas de conflit car la règle CSS pour l’état actif annule la précédente.
                L’élément div à l’état actif possède à la fois un identifiant et un sélecteur de classe, cette règle CSS aura donc la priorité sur la précédente.
                  Intégrateur web freelance
                  • 23360
                  • 258 Posts
                  Donc un resune la class .active aura la "priorite" sur le container #menu-intro?
                  <div id="menu-intro" class="active">coucou</div>
                    • 34001
                    • 428 Posts
                    Jean-Christophe B. Reply #9, 17 years ago
                    Pas tout à fait.

                    Je ne sais pas si tu es familier avec les degrés de priorité des règles CSS (cf Cascade CSS et priorité des sélecteurs sur OpenWeb) Selon les sélecteurs utilisés et leur agencement, une règle CSS sera plus ou moins prioritaire. Tout est basé sur un système à 4 chiffres qui permet de donner un certain «poids» et donc une priorité à chacune des règles.

                    Quelques exemples:


                    • Pour une classe: 0010
                    • Pour un identifiant: 0100
                    • Pour un identifiant + une classe: 0110

                    On peut donc en déduire que ta classe .active déclarée seule n’aura pas la priorité sur l’identifiant #menu-intro.
                    Par contre, l’association d’un identifiant et d’une classe (par exemple #menu-intro-12.active) sera bien prioritaire sur un identifiant déclaré seul.

                    C’est plus clair ? smiley
                      Intégrateur web freelance
                      • 23360
                      • 258 Posts
                      Oui merci, en effet je n’avais cette notion de priorite.
                      Mille mercis pour ton aide, je vais mettre tout ca en pratique ce soir