Well, let`s take look... You have three menus, some have one more level as a submenu. You organizaton of documents should look like:
- Quick Links (folder, no content), ID e.g. 2
* Volunteering (subdocument of "Quick Links")
* Calendar (subdocument of "Quick Links")
* Competitions (folder, with content)
o Dressage (subdocument of "Competetions")
o Driving (subdocument of "Competetions")
o Eventing (subdocument of "Competetions")
o Hunter/Jumper (subdocument of "Competetions")
o Trail (subdocument of "Competetions")
* Clinics (subdocument of "Quick Links")
* Special Events (subdocument of "Quick Links")
* Results (subdocument of "Quick Links")
About GMHA (folder, no content), ID e.g. 22
* About GMHA (see above)
* News & Press
* Capital Campaign
o Campaign Goals
o Trails
o Named Giving
o Planned Giving
* Sponsorship
* Membership
Home/Site (folder, no content), ID e.g. 44
* Home (the default homepage)
* Links
* Site Map
* Directions
* Contact Us
Okay, then let`s look how to build the menus...
Initially, you need three wayfinder calls for the three menus. I put in some IDs for example (the three "root" folders).
For the sake of the urgent case I’ll take your source, which looks like this at the moment:
<!-- left column start -->
<h4>Quick Links</h4>
<!-- add space before </a> - solves extra whitespace problem in IE6 Win2000 -->
<div id="p7swapmenu1">
<ul>
<li class="single"><a href="volunteer-opportunities.html">Volunteering </a></li>
<li class="single"><a href="gmha-calendar.html">Calendar </a></li>
<li class="closed" id="p1"> <a href="competitions.html" onClick="P7_swapClass(1,'p1','open','closed','li')">Competitions </a>
<ul>
<li><a href="dressagecompetition.html">Dressage </a></li>
<li><a href="drivingcompetition.html">Driving </a></li>
<li><a href="eventingcompetition.html">Eventing </a></li>
<li><a href="hunterjumpercompetition.html">Hunter/Jumper </a></li>
<li><a href="trailcompetition.html">Trail </a></li>
</ul>
</li>
<li class="single"><a href="clinics.html">Clinics </a></li>
<li class="single"><a href="special-events.html">Special Events </a></li>
<li class="single"><a href="gmharesults.html">Results </a></li>
</ul><!-- end first bunch -->
</div>
<!-- start 2nd bunch/static links -->
<h4>About GMHA </h4>
<div id="p7swapmenu2">
<ul>
<li class="single"><a href="aboutgmha.html">About GMHA </a></li>
<li class="single"><a href="news-press.html">News & Press </a></li>
<li class="closed" id="p2"><a href="capitalcampaign.html" onClick="P7_swapClass(1,'p2','open','closed','li')">Capital Campaign </a>
<ul>
<li><a href="campaign-goals.html">Campaign Goals </a></li>
<li><a href="gmha-trails.html">Trails </a></li>
<li><a href="named-giving.html">Named Giving </a></li>
<li><a href="planned-giving.html">Planned Giving </a></li>
</ul>
</li>
<li class="single"><a href="sponsorship.html">Sponsorship </a></li>
<li class="single"><a href="gmha-membership.html">Membership </a></li>
</ul>
</div>
<!-- start 3rd bunch static links -->
<h4>Home/Site</h4>
<div id="p7swapmenu3">
<ul>
<li class="single"><a href="index.html">Home </a></li>
<li class="single"><a href="links.html">Links </a></li>
<li class="single"><a href="sitemap.html">Site Map </a></li>
<li class="single"><a href="gmha-directions.html">Directions </a></li>
<li class="single"><a href="contact-information.html">Contact Us </a></li>
</ul>
</div><!--end swapmenus-->
You have a special thing in there, which I will try to describe later. First of all, we build the three wayfinder calls in your template:
<!-- left column start -->
<h4>Quick Links</h4>
<div id="p7swapmenu1">
[!Wayfinder?startId=`2` &rowTpl=`menu_row_tpl` &parentRowTpl=`menu_parent_row_tpl` &rowIdPrefix=`p`!]
<!-- end first bunch -->
</div>
<!-- start 2nd bunch/static links -->
<h4>About GMHA </h4>
<div id="p7swapmenu2">
[!Wayfinder?startId=`22` &rowTpl=`menu_row_tpl` &parentRowTpl=`menu_parent_row_tpl` &rowIdPrefix=`p`!]
</div>
<!-- start 3rd bunch static links -->
<h4>Home/Site</h4>
<div id="p7swapmenu3">
[!Wayfinder?startId=`44` &rowTpl=`menu_row_tpl` &parentRowTpl=`menu_parent_row_tpl` &rowIdPrefix=`p`!]
</div><!--end swapmenus-->
First we tweak the standard list element template &rowTpl of wayfinder, because we need the class "single" in it:
[!Wayfinder?startId=`1`
&rowTpl=`menu_row_tpl`!]
Create a chunk "menu_row_tpl" with this content:
<li[+wf.id+] class="single [+wf.classnames+]">
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>
[+wf.wrapper+]
</li>
This is the standard row template, but with this additional class "single".
This will result in the correct menus (I hope), but without the javascript thing.
To get this working we’ll have to tweak another template of wayfinder. Let’s look at the
parameters...
There we find:
&parentRowTpl
default: NULL
values: name of template chunk
description: The parentRowTpl template is used when processing items that are folders with their children being displayed in the menu.
available placeholders: Same as RowTpl.
example:
<li[+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]»</a>
[+wf.wrapper+]
</li>
That is what we need, because every document which has child elements is treated different. We want to achieve this output:
<li class="closed" id="p2"><a href="capitalcampaign.html" onClick="P7_swapClass(1,'p2','open','closed','li')">Capital Campaign </a>
So we create a chunk named "menu_row_parent_tpl" with this content:
<li[+wf.id+] class="closed [+wf.classnames+]">
<a href="[+wf.link+]" onClick="P7_swapClass(1,'p[+wf.docid+]','open','closed','li')" title="[+wf.title+]">[+wf.linktext+]</a>
[+wf.wrapper+]
</li>
What does it do? First, let’s take a look at the final wayfinder call:
[!Wayfinder?startId=`1` &rowTpl=`menu_row_tpl` &parentRowTpl=`menu_parent_row_tpl` &rowIdPrefix=`p`!]
&startId is the ID of the folder containing the documents.
&rowTpl is the modified standard list element
&parentRowTpl is the modified list element that has child documents
&rowIdPrefix creates an unique ID for each list element, here "p" + the ID
That is all we need (I think) to build the output. Look at the modified parentRowTpl, I put in the unique IDs as "[+wf.id+]" which will create something like id="p23" for the list element which points to doc 23. Then in the javascript call I put in another place holder "[wf.docid+]" to match the corresponding list element id.
Hope this works... All out of my head, which is getting tired (past one in the morning over here in germany...).
Regards,
Marc
Could someone give me a hand, please?? (I am a Green Newbie at this point)
