Hi there,
Very happy to have discovered MODx, seems to be the only CMS I can find with a logical mental-model.
I am using a table for a navigation menu.
Primary issue: Can I use wayfinder to add the classname and id ’next’ to the menu item following the current menu item?
Secondary issue : Can I get wayfinder to deposit menu items in groups of three into seperate table rows? If not I will make wayfinder calls for each table row using the &startId parameter.
I need to add the ID and classname ’next’ to the menu item of the page after the current page, to guide the user through the site. When at the last page in the menu, the first item becomes ’next’, in a loop. When the user mouses over the menu, a bit of javascript removes the ’next’ class name from the ’next’ item, and puts it back when the user mouses out.
I’m a MODx and php noob, but I have tried using &jsTpl to put a chunk of JS in the header, but the chunk can’t access [*id*] because it’s just a chunk. And I don’t know if that is a valid approach to problem. So how do I do this menu? Only 7 pages in the menu.
Thanks for helping.
Desired output (Showing SEO Websites active, and SEO as ’next’). Can provide working example page if necessary.
<table id="nav" onmouseover="document.getElementById('next').removeAttribute('class')" onmouseout="document.getElementById('next').setAttribute('class', 'next')">
<tr>
<td onmouseover="(event.stopPropagation)?event.stopPropagation():event.cancelBubble = true">
<a href="index.html" class="selected">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
<td>
<a href="" id="next" class="next">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
<td>
<a href="">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
<td>
<<a href="">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
<td>
<a href="">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<h4>Title</h4>
<p class="description">Description</p>
</a>
</td>
<td></td>
<td></td>
</tr>
</table>
