Custom classes in Wayfinder

How can I use wayfinder to generate a list with different <li> classes as shown below


<ul>
<li class="class1"><a href="#">Animals</a></li>
<li class="class2"><a href="#">People</a></li>
<li class="class3"><a href="#">Nature</a></li>
<li class="class4"><a href="#">Urban</a></li>
<li class="class5"><a href="#">Abstract</a></li>
</ul>

Thank you

There are several ways. One is to create a Template Variable (let’s call it rowId) and put the 1, 2, 3, etc. there.

Then in your rowTpl, use:



You can also use a document field you’re not using for anything (e.g. description) instead of a TV (and put the numbers there) or use the pagetitle, menutitle, or alias of the document as the class name.

You could also generate the ids in a snippet and use a snippet tag in the code above instead of the TV tag.

Thank you for the reply problem solved. I wanted to implement a sliding image menu in modx and the result is www.pixodel.co.za/index.php (project still under construction) the original menu and source code is from phatfusion.net

Very nice.

Were you able to integrate this with Wayfinder? And, if so, do you have any tips on doing it?

Nice sliding image menu.
Why would you want to use wayfinder for such a short menu?
Personally I would just use plain xhtml/css/javascript.

Being a newbie to MODx I guess I just wanted to see if it could be done and also if I could achieve this in Wayfinder. More of a learning curve really.

How I implemented this was as follows

1. Download all the files from the phatfusion www.phatfusion.net site unzip and add to template folder
2. Add the mootools, javascript and css to the Template header
3. Create the images a bit of photoshop and save to images folder
4. The images are addded to the menu through css styling, in the file imageMenu.css (included with the download) as shown below


#imageMenu ul li.WhatWeDo a {background: url(../images/whatwedo.jpg) repeat scroll 0%;}
#imageMenu ul li.DesignAndPrint a {background: url(../images/designandprint.jpg) repeat scroll 0%;}
#imageMenu ul li.WebsiteDesign a {background: url(../images/websitedesign.jpg) repeat scroll 0%;}
#imageMenu ul li.CorporateWear a {background: url(../images/corporatewear.jpg) repeat scroll 0%;}
#imageMenu ul li.ContactUs a {background: url(../images/contactus.jpg) repeat scroll 0%;}

5.So now we have the images and the css class together li.WhatWeDo and url(../images/whatwedo.jpg)

6. The next step is to add the menu to the template and in order for it to work we need wayfinder to generate the different list classes this was done as follows


7. in &rowTpl add the code (Thanks to BobRay for the reply) and call it pixImageMenu

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

The Idea : Create the pages/document/resources and give each one a title corresponding to the css class, Then get the title and use it to generate the custom classes using wayfinder


8.Create the pages I need and give each page a title corresponding to the css class (e.g WhatWeDo).

10.Then the wayfinder call

[!Wayfinder? &startId=`1` &rowTpl=`pixImageMenu` &sortBy=`menuindex` &level=`1`!]


11.Using sort by menuindex give me the flexibility to rearrange the menu in any way I like


The final wayfinder call in the Template is


<div id="imageMenu">
[!Wayfinder? &startId=`1` &rowTpl=`pixImageMenu` &sortBy=`menuindex` &level=`1` !]
</div>

<script type="text/javascript">
window.addEvent(’domready’, function(){
var myMenu = new ImageMenu($$(’#imageMenu a’),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>



Thank You

Wow. That’s a really clever way of doing it. Thanks for sharing it and writing such clear documentation.

That’s what makes this community so great.

Welcome to MODx.