Single Row Menu in Wayfinder for Revolution

2 Posts

Akexis Reply #1, 15 years, 9 months ago

http://www.gregorysmart.com/downloads/The_almost_Complete_Guide_to_Constructing_Menus_in_MODx_Using_Wayfinder.pdf

^ I’ve been using the above document to try to piece together a wayfinder menu. I’m using Revolution and I’m fairly certain the above code is Evolution. (I think.) I’m managing to modify (I think) properly but after two Rockstars, a nervous twitch and the beginning of a headache after hours and hours of working with this stuff I’ve finally broken down and decided to ask for help.

I’m putting modx Revolution on a site which I haven’t fully converted yet.

http://artbystaci.com/

You can see the modx pages at: http://artbystaci.com/index.php?id=1

I have essentially two menus currently, the vertical one which is my haphazard job of trying to put together the wayfinder menu and the original menu which takes you to the actual html documents.

It seems that I’m calling the chunk properly but the chunk is obviously not working. I figured I’d try and get the links setup and going to where they need to first and then tackle the issue of it being vertical and showing the unordered list bullets.

<div align="center">
<ul>	            
<li><a href="[[+wf.link]]"><img name="index_03" src="images/index_03.gif" width="129" height="45" border="0" onMouseOver="this.src='images/index_03-over.gif'" onMouseOut="this.src='images/index_03.gif'"><span>[[+wf.linktext]]</span></a></li>
	            <img src="images/index_04.gif" width="32" height="45" alt="">
			    <li><a href="[[+wf.link]]"><img name="index_05" src="images/index_05.gif" width="90" height="45" border="0" onMouseOver="this.src='images/index_05-over.gif'" onMouseOut="this.src='images/index_05.gif'"><span>[[+wf.linktext]]</span></a></li>
				<img src="images/index_04.gif" width="32" height="45" alt="">
			    <li><a href="[[+wf.link]]"><img name="index_07" src="images/index_07.gif" width="205" height="45" border="0"onMouseOver="this.src='images/index_07-over.gif'" onMouseOut="this.src='images/index_07.gif'"><span>[[+wf.linktext]]</span></a></li>
				<img src="images/index_04.gif" width="32" height="45" alt="">
                <li><a href="[[+wf.link]]"><img name="index_09" src="images/features-menu.jpg" width="133" height="45" border="0"onMouseOver="this.src='images/features-menu-over.jpg'" onMouseOut="this.src='images/features-menu.jpg'"><span>[[+wf.linktext]]</span></a></li>
                <img src="images/index_04.gif" width="32" height="45" alt="">
		        <li><a href="[[+wf.link]]"><img name="index_09" src="images/index_09.gif" width="133" height="45" border="0"onMouseOver="this.src='images/index_09-over.gif'" onMouseOut="this.src='images/index_09.gif'"><span>[[+wf.linktext]]</span></a></li>
</ul></div>

At first I didn’t have any of the list code but thought maybe that’s how it would know how to show the array, but... well, my theory is busted.

This is the code I’m using to call the chunk:

[[!Wayfinder? &startId=`0` &outerTpl=`menuContainer` &outerClass=`navigation`]]

I haven’t modified anything in the CSS. I’m an absolute noob when it comes to php and modx so sorry if I sound like an idiot or need to ask numerous questions to verify. Even if I have to get rid of the mouse over images and go straight text, I’d be happy with that for now. I do know that when I saved the chunk but didn’t have any code the menu linked properly.

Take pity on this noob and give me a hand? I’d love you forever.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 15 years, 9 months ago

That is your chunk tpl? No, no, no! Each part of the menu gets its own chunk tpl. The outerTpl chunk controls the outermost containers; by default it’s simply

<ul id="topnav"[+wf.classes+]> 
[+wf.wrapper+] 
</ul>

The wf.wrapper part continues processing. Next comes the rowTpl chunk; this controls each row in the menu

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

Again, the wf.wrapper part has Wayfinder continue processing any inner submenu items.

The best way to do this is to simply use a bare [[Wayfinder? &startId=`0`]], and you’ll get the default nested unordered list. From the looks of it, you would be able to use that just fine. Put the enclosing divs in your template, and the Wayfinder snippet in place of the <ul> ... </ul> section.

If you need extra formatting, try with classes and CSS first, then finally start working with the various tpls, remembering that each tpl controls a very finite and specific part of the menu.

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

2 Posts

Akexis Reply #3, 15 years, 9 months ago

Okay, I think I understand what you’re saying. Off to go cause havoc but I’m sure I’ll be back with other questions. Thank you so much for the speedy reply!