We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 5091
    • 332 Posts
    I wonder if we can do this with Wayfinder.

    Right now, the  ’&rowIdPrefix’, ’&firstclass’ these parameters add the class to <li>, which is already very flexible for most needs. I am curious though, is it possible to have the class or prefix ID adds to

    <li><a href="llink" id="prefixID">Menu 1</a></li>

    Why is this different?

    For menu that uses background images for each menu tab, and for the sake of accessible web (image replacement), having the id or class added in the <a> has an advantage.

    Example:

    <div id="menu">
    <ul><li><a href="home.html" id="m1">Home</a></li>
        <li><a href="about.html" id="m2">About</a></li>
        </ul>
       
        </div>

    I have the background image for each tab placed in the ID (m1) and use the negative value for text-indent to push the menu text (home and about) outside of browser view point.

    #menu li a {background-position: left top}
    #menu li a:hover {background-position: left 39px;}
    #m1 {width: 65px; background: url(../images/menu/m1-trans.png);}

    #m2 {width: 73px; background: url(../images/menu/m2-trans.png) 65px 0;}

    as you can see, the code is very clean and straight forward. I know it’s also doable with ID/class place in the <li> tag, however I have yet find it very easy to control the menu text.






      • 4229
      • 16 Posts
      Sounds like I’m working on integrating a similar menu.

      Somehow we need a series of incrementing ID names (m1, m2, m3, etc) on the link tag, right? Like a function taking an ’m’ prefix and cycling upwards in number for each new link.

      Will post back if I get anywhere on my own. If you’ve discovered how in the meantime, please post back!

      If not, hopefully the bump will get the attention of someone more knowledgeable. grin
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        Adding the rowIdPrefix causes the prefix you specify + the id to be added as the [+wf.id+] placeholder. You can put that anywhere you like in your rowTpl template.
          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
          • 4229
          • 16 Posts
          Thanks, I played around with rowIdPrefix and got it working no problem.

          I think in my head I made it harder by striving for solution that was in effect "rowCLASSprefix" (does anything like that exist?), when really an ID (as the OP was talking about) is easy to implement.

          My working menu can be seen in action at:  http://test.blbs.co.uk  (it’s a freebie site for my uncle, who does my accounts!).  It’s based on Stu Nicholls’ Overlapping Tabs Type 3.  Tweaked it with new images and also added an icon overlay to each tab, though I’m now having issues with it displaying the wrong tab PNG on the left side of selected tabs.. weird. Better recheck the z-index values on the neighbouring tabs!

          Anyway, Wayfinder doesn’t seem so dense any more, though sadly the same can’t be said for me!

          Thanks for re-focusing me on rowIdPrefix, sottwell.  smiley

          In case anyone else is curious, the Wayfinder call used is:
          [!Wayfinder? &startId=`0` &level= `0` &outerTpl=`bl.OuterTpl` &rowTpl=`bl.RowTpl` &hereTpl=`bl.HereTpl` &activeParentRowTpl=`bl.ActiveParentRowTpl` &rowIdPrefix=`m` &hereClass=`` !]


          Note &rowIdPrefix=`m`

          I think the Wayfinder call could be simpler / shorter by amending the CSS to use ’active’ as the selected class, then I wouldn’t need to declare &hereClass at all (defaults to ’active’) nor use &hereTpl.  I’m just glad it’s working.

          Oh, and the &rowTpl chunk (now with unique IDs on the ’a’ links) looks like this:
          <li><a href="[+wf.link+]" title="[+wf.title+]" [+wf.id+] class="[+wf.classnames+]"><b class="p1"><span class="icon"></span></b><b class="p2">[+wf.linktext+]</b><b class="p3"></b></a>[+wf.wrapper+]</li>

          Note [+wf.id+] within the ’a’ tag.

          Hope that helps the OP or someone else; it’s simpler than I thought it would be, which made it harder to wrap my head around at first!  grin

          -edit-
          I duplicated the hereTpl chunk and made an activeParentRowTpl chunk.  I’ve added &activeParentRowTpl into the Wayfinder call so that the menu will reflect when the current document resides within a document folder shown on the menu.

          Very impressed with Wayfinder.
            • 7231
            • 4,205 Posts
            You could also use stuff like the document alias as a id or class name or you could use a TV to set a the style. There are a few options to get this done. That’s what is so cool about using modx. grin
              [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

              Something is happening here, but you don&#39;t know what it is.
              Do you, Mr. Jones? - [bob dylan]