Vertical menu with Wayfinder

46 Posts

subran Reply #1, 11 years, 11 months ago

Hi,

I try to use a menu like this with wayfinder :

<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
	
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
	
	<div class="menu" id="menu3">
		<a href="#">Menu 3</a>
	</div>
	
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>

But I'm stuck for the code I have to use because Wayfinder generates a code with ul and li

Is it possible to adapt it to a menu code with lots of div's ?

Thanks for the answer,

Sub

1,098 Posts

microcipcip Reply #2, 11 years, 11 months ago

Yes it is possible, Wayfinder is really flexible. Add &outerTpl, &rowTpl, &innerTpl and &innerRowTpl parameters to your Wayfinder call, then you can change the output as you wish. See the documentation here:
http://rtfm.modx.com/display/ADDON/Wayfinder

Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)

46 Posts

subran Reply #3, 11 years, 11 months ago

Yes, I know it's flexible I used it for different menus with ul and li but here it's with div's and I'm quite lost sad

387 Posts

whistlemaker Reply #4, 11 years, 11 months ago

As was suggested rtfm - the ul and li are created by templates, you need to create custom templates...
to get you started:
the default outer template is

<ul[[+wf.classes]]>[[+wf.wrapper]]</ul>

create your own outer template similar to this:

<div[[+wf.classes]]>[[+wf.wrapper]]</diiv>

Now call your custom template and you will have a div tag instead of a ul tag
Modify the other templates as needed.

... though why one would create a vertical menu with divs instead a ul li list escapes me - whatever!