Modify Wayfinder html output

After reading the Wayfinder E-book. I have come to the conclusion that there is not a way to customize the html tags that wayfinder outputs as menu holders. Is this correct?


I want to port a menu that looks like the following. Will it be easier to design a new menu?

_________________________________________________________________

<!-- This is my existing drop down menu -->

<ul id="side-menu">
<li>Menu Item 1 <-- clickable but not anchor -->
<ol>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
</ol>
</li>
<li>Menu Item 2
<ol>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
<li><a href="#">Sub Item 2.3</a></li>
</ol>
</li>
</ul>

__________________________________________________


Thanks in advance for any ideas

mckcd,

Seeing this is your first post, welcome to MODx!

Wayfinder will output almost anything! I think I say that in the book somewhere...it will all boil down to your imagination. I think I also say that it is important to visualise the different parts of the menu you want to port to Wayfinder and then break them into chunks....OK, enough of the lecture already.

Yes, you can modify the html tags that wayfinder outputs to suit your needs. Btw, I don’t get what you mean by "clickable but not anchor"...U mean a dummy link?

OK, let us break this down.

Your outerTpl will be


your rowTpl


Your innerTpl


And finally, your innerRowTpl


Add you <a> tags etc in the tpl chunks as usual. Also, add the WF placeholders that you need. That’s all there is to it

Hope this helps

cheers/k

Thanks. I think I have a much better understanding of it now.

Yes by clickable but not anchor I mean dummy link. The dummy link expands the menu. I thought i could just use an unpublished document for this. Will this work?

Wayfinder doesn’t show unpublished docs, so it won’t work that way. So you want the first level items of the menus to act as menu headings that when clicked will not open their respective pages but instead reveal the 2nd level menu items? AND you want the second level items hidden until their parent items are clicked?

If so, there are several ways to go about this:

read up on &hideSubMenus in WF. Also check out &categoryFoldersTpl

You could also use jQuery or some other js accordion menus (there are even some CSS ones I believe).

The snippet FirstChildRedirect can also be used to redirect users to the first child item of any document. So, when your users click the parent menu items, they would get redirected to menu sub-item 1.1 etc

cheers/k

Thanks for all of your help and a great e-book kondongo. I’m sure it took many many hours to write.
After reading it the first time I didn’t fully understand the nesting aspect of wayFinder. However, I’m sure if I had actually taken the time to complete the example lessons I would not have experienced any problems. Once you steered me in the right direction though I was able to complete my menu by reading more of your book.

Awesome Job!

If you would like to see the menu it is here: http://www.ClimaxHeating.com

Nice one, nice site! Thx for your kind words

cheers/k