How Generate Menu in Wayfinder

11 Posts

oscar arzola Reply #1, 18 years, 3 months ago

hi, i dont understat how Wayfinder generate a menu..

Can you help me to generate chunks for a menu like that

<ul id="menu1" class="menu">

		<li>
			<a class="m1" href="#">Weblog Tools</a>
			<ul>
				<li><a href="http://www.pivotx.net/">PivotX</a></li>
				<li><a href="http://www.wordpress.org/">WordPress</a></li>
				<li><a href="http://www.textpattern.com/">Textpattern</a></li>
				<li><a href="http://typosphere.org/">Typo</a></li>

			</ul>
		</li>
		<li>
			<a class="m2" href="#">Programming Languages</a>
			<ul>
				<li><a href="http://www.php.net/">PHP</a></li>
				<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>

				<li><a href="http://www.python.org/">Python</a></li>
				<li><a href="http://www.perl.org/">PERL</a></li>
				<li><a href="http://java.sun.com/">Java</a></li>
				<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
			</ul>
		</li>
		<li><a class="m3" href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>

		<li>
			<a class="m4" href="#">Cool Stuff</a>
			<ul>
				<li><a href="http://www.apple.com/">Apple</a></li>
				<li><a href="http://www.nikon.com/">Nikon</a></li>
				<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
				<li><a href="http://www.nintendo.com/">Nintendo</a></li>

			</ul>
		</li>
		<li>
			<a class="m5" href="#">Search Engines</a>
			<ul>
				<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
				<li><a href="http://www.google.com/">Google</a></li>

				<li><a href="http://www.ask.com/">Ask.com</a></li>
				<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
			</ul>
		</li>
	</ul>

- 4,205 Posts
dev_cw Reply #2, 18 years, 3 months ago
You need to break down the menu into its fundamental parts. Starting with the outermost frame or outerTpl, which in the case of your menu is the <ul>. So the outerTpl will be:

outerTpl:
```
<ul id="menu1" class="menu">
[+wf.wrapper+]
</ul>
```
the rowTpl is the tricky one because of the custom ID for each item. You will need to be creative here and adapt the styling to something that is readily available like the document id.

RowTpl:
```
<li[+wf.classes+]><a class="m[+wf.docid+]" href="#">[+wf.linktext+] </a>
    [+wf.wrapper+]
</li>
```
This will output ’m12’ for the class for document number 12, so you would need to change the css to accommodate these changes.

Next is the innerTpl to style the inner <ul> (note: you need to set this or else it will use the same as the outerTpl):
```
<ul[+wf.classes+]>
	[+wf.wrapper+]
</ul>
```
And finally the innerRowTpl:
```
<li[+wf.classes+]><a href="[+wf.link+]">[+wf.linktext+]</a></li>
```
This should do it. There are other ways of working with the unique id issue, this is just one idea.

Read more on the wayfinder parameters at: http://www.muddydogpaws.com/development/wayfinder/parameters.html
[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]