OK. you will need to do a few things:
A. Create chunks (I assume you know how to do this)
Separately create the chunks you need for your menu. The chunks contain the templates (tpl) that will be used to style and structure your menu. In your case you have 4 chunks to create. They are:
1. cssplay_parentRow - this chunk will be used as a template for &parentRowTpl - To quote muddydogpaws - The parentRowTpl template is used when processing items that are folders with their children being displayed in the menu.
Note that you DON’T have to use the same names for your chunks as used here. Important thing to note is that whatever names you give your chunks must be the same names you tell wayfinder in your wayfinder call. However, you cannot change the pre-defined wayfinder parameters, e.g. the & parentRowTpl.
2. cssplay_outer. This will be your &outerTpl and is the outermost wrapper for your menu...basically, what your whole menu is contained within
3. cssplay_inner. This chunk will be your &innerTpl and is the template (wrapper) for your sub-menus
4. cssplay_row. This chunk will be for the &rowTpl - This template is used to output each document, folder, or weblink (see exception in muddydogpaw’s site)
You can also create this chunk if you need to:
5. cssplay_dropdown. This chunk will contain a link to your CSS file. You don’t have to create this chunk if: thee that the current webpage contains or references a corresponding CSS stylesheet. Meaning, if you have your own CSS file, that is referenced on the page you are using, don’t create this chunk and don’t have it in your wayfinder call.
Don’t include the wayfinder calls in these chunks. Include only the chunk stuff, e.g. in your example, for cssplay_parentRow
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<!--[if lte IE 6]>
<a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
<table><tr><td>
<![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
NEXT
B. Create corresponding classes in your CSS file
You have told wayfinder in your call that you will be using several CSS classes to style your menu. These are:
1. hide - which your call says refers to the &parentClass - the values in your CSS for the class "hide" will apply to each document that has children, i.e. a folder or container document, thus the &parentClass
2. menu - make sure your CSS has a class called menu. In your case, this will be applied to the &outerClass - therefore, values in your CSS for this class menu will be applied to the the OuterTpl, i.e. the menu container.
Again, you don’t have to use this class names. However, whichever way you name your classes in your CSS, make sure you have corresponding names in your wayfinder call.
THEN
C. Place your wayfinder call either in your template if you want it to be available for all documents using that template, or place it in a particular document if you want it to be available for only that document. In your case you want to place it in the template in your mock-up, it looks like the main menu for your website. So, your wayfinder call:
[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]
Just make sure you place the wayfinder call in your template exactly where you want it to appear. In your template it normally should be between some divs near the top of your template.
Done and dusted! Hope haven’t forgotten anything.
