We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered wayfider - a special type of menu item

    • 42530
    • 3 Posts
    kaan96 Reply #1, 13 years, 8 months ago
    Hello all.
    How to implement this type of menu:
    <li class="home-page"><a href="index.html"><span></span></a></li>
                    <li ><a href="about.html">About</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="clients.html">Clients</a></li>
                    <li><a href="contacts.html">Contacts</a></li>


    Here part of css file:
    ul.menu li.home-page span {background:url(../images/home-page-img.png) 0 0 no-repeat; width:19px; height:19px; display:block}


    This is what I got:
    [[Wayfinder? &startId=`0`&outerClass=`menu` &firstClass=`home-page`]]

    I need to delete name and inserted <span> parametr in first paragraph.

    This question has been answered by ottogal. See the first response.

      • 15558
      • 108 Posts
      kehezen Reply #2, 13 years, 8 months ago
      Hi,

      I suck at jQuery, but you might manage to do it using some crap like that :

      $('li.home-page').children().replaceWith('<span></span>');


      Needs confirmation.
      Search about replaceWith.

      Brace yourself, noobs are posting code.
        Sorry for that ⇧ , I'm no dev but I wanna try
        • 22427
        • 793 Posts
        ottogal Reply #3, 13 years, 8 months ago
        You could try to use a special &rowTpl parameter containing an output modifier:
        <li[[+wf.classes]]><a href="[[+wf.link]]" >[[+wf.linktext:is=`Home`:then=`<span></span>`]]</a>[[+wf.wrapper]]</li>
        (assuming that "Home" is the Title of the first item.)

        (Not tested)
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          sottwell Reply #4, 13 years, 8 months ago
          Presuming my home page is the first item in the list, I'd just use the &firstClass=`home-page` in the Wayfinder properties, put span tags in the rowTpl, then use CSS to deal with .home-page span{} styling.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 42530
            • 3 Posts
            kaan96 Reply #5, 13 years, 8 months ago
            Quote from: sottwell at Jan 15, 2013, 12:30 AM
            Presuming my home page is the first item in the list, I'd just use the &firstClass=`home-page` in the Wayfinder properties, put span tags in the rowTpl, then use CSS to deal with .home-page span{} styling.
            But how to delete titele from first item?
              • 15558
              • 108 Posts
              kehezen Reply #6, 13 years, 8 months ago
              Quote from: kaan96 at Jan 15, 2013, 07:07 AM
              Quote from: sottwell at Jan 15, 2013, 12:30 AM
              Presuming my home page is the first item in the list, I'd just use the &firstClass=`home-page` in the Wayfinder properties, put span tags in the rowTpl, then use CSS to deal with .home-page span{} styling.
              But how to delete titele from first item? 

              .home-page span{ display:none; }


              for example. It depends on your design/needs.
                Sorry for that ⇧ , I'm no dev but I wanna try
              • discuss.answer
                • 22427
                • 793 Posts
                ottogal Reply #7, 13 years, 8 months ago
                In the meantime I could test my proposal of using an output modifier in the &rowTpl chunk.

                It turns out that this does not work:
                [[+wf.linktext:is=`Home`:then=`<span></span>`]]
                The other items' linktexts would be empty.

                But changing it to this:
                [[+wf.linktext:isnot=`Home`:else=`<span></span>`]]
                results in the wanted output.
                  • 42530
                  • 3 Posts
                  kaan96 Reply #8, 13 years, 8 months ago
                  Quote from: ottogal at Jan 15, 2013, 07:59 PM
                  In the meantime I could test my proposal of using an output modifier in the &rowTpl chunk.

                  It turns out that this does not work:
                  [[+wf.linktext:is=`Home`:then=`<span></span>`]]
                  The other items' linktexts would be empty.

                  But changing it to this:
                  [[+wf.linktext:isnot=`Home`:else=`<span></span>`]]
                  results in the wanted output.

                  You rock my world, thx smiley