Help to translate a dropdown menu into Wayfinder menu.

11 Posts

biffyn Reply #1, 8 years, 6 months ago

Hi all,
I'm new to ModX this is the first time I have used it, so it's safe to assume I'm a complete novice when it comes to ModX.

Anyway, I am trying to use a template I made in webflow with Modx Revo. I'm getting on ok with it but need help to translate the dropdown nav-menu into a wayfinder menu. Here is some example code form the dropdown menu:

<!--- navBar --->

<nav class="w-nav-menu nav-menu" role="navigation"> 
		<div class="w-dropdown" data-delay="0">
			<div class="w-dropdown-toggle navlinks">
				<div>ÜBER UNS</div>
			</div>  
			<nav class="w-dropdown-list dropdown-list">
				<a class="w-dropdown-link dropdown-link" href="#Uber">Über</a>
				<a class="w-dropdown-link dropdown-link" href="#Zeitstrahl">Zeitstrahl</a>
				<a class="w-dropdown-link dropdown-link" href="#Grundsatze">Grundsätze</a>
				<a class="w-dropdown-link dropdown-link" href="#broschure">Broschüre</a>
			</nav>
		</div>
</nav>

Not sure how to go about translating this into a wayfinder menu. I have tried to get it working with no joy. Not sure what Tpl's I need to be using; do i need to use parent Tpl's? I'm fairly confident that the outerTpl is as shown below, but for the others I'm at a loss. Any help would be greatly appreciated.

Thanks James

<!--- outerTpl Chunk --->

<nav class="w-nav-menu nav-menu" role="navigation">[[+wf.wrapper]]</nav>

<!--- rowTpl Chunk --->



<!--- innerTpl Chunk --->



<!--- Wayfinder Call --->

[[Wayfinder? &startId=`` &sortBy=`menuindex` &outerTpl=`outerTpl` &rowTpl=`rowTpl` &innerTpl=`innerTpl`]]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 8 years, 5 months ago

In the first place, almost all menus can be re-designed to be simple nested unordered lists. This more easily can be manipulated to reflect your resource structure in the Resource Tree. There are any number of examples and tutorials on this for just about any kind of drop-down menu you could imagine.

What you have is a pretty basic dropdown structure, with a top-level item which itself is not a link, and a second level which contains the links. You could use 'parentRowTpl' for this, or you could use the 'categoryFoldersTpl' for that top-level item.

Or, if that top-level item is the only one, you could use it as the parent, and use the 'displayStart' and 'startItemTpl' properties to display the parent, then make the menu of its children.

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

11 Posts

biffyn Reply #3, 8 years, 5 months ago

Hi Susan thanks for taking the time to reply and sorry for my late reply, I have been away and busy the last week. I have tried to get it to work but still no joy. Not sure what i need to do really.

Thanks
James