Just in case anyone else is looking for a solution for this it’s actually quite simple.
The only Wayfinder template you need to modify is the $parentRowTpl one. We are adding the class ’header’ to all containers in the menu - i.e. all pages with children. We also don’t include the URL of the parent page as these pages just serve as clickable headers to expand the submenu.
<li class="[+wf.classnames+]"><a class="header" href="#" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
In my own case I put that in a chunk called projects_menu_parent_row and this gave me the wayfinder call:
[!Wayfinder?startId=`[[UltimateParent]]` &displayStart`false` &outerTpl=`OuterTpl` &innerTpl=`InnerTpl` &rowTpl=`RowTpl` &parentRowTpl =`projects_menu_parentrow` &innerRowTpl=`nnerRowTpl` &firstClass=`first` &hereClass=`here`!]
The HTML generated by Wayfinder looks like:
<ul id="ul_nav"><li class="first"><a style="outline: medium none;" class="header" href="#" title="Project Manaagement">Project Management</a><ul style="display: block;"><li class="first"><a class="header" href="#" title="Commercial Project Management">Commercial</a><ul style="display: block;"><li class="first"><a href="/projects/project-management/commercial/research_library_-boole_refurbishment" title="Boole Refurbishment ">Boole Refurbishment </a></li>
<li><a href="/projects/project-management/commercial/brookfield_health_sciences_complex" title="Brookfield Complex">Brookfield Complex</a></li>
<li><a href="/projects/project-management/commercial/western_gateway_building" title="Western Gateway ">Western Gateway </a></li>
<li><a href="/projects/project-management/commercial/glucksman_art_gallery" title="Glucksman Gallery">Glucksman Gallery</a></li>
<li><a href="/projects/project-management/commercial/mardyke_project" title="Mardyke Project">Mardyke Project</a></li>
<li class="last"><a href="/projects/project-management/commercial/biosciences_extension" title="Biosciences Ext">Biosciences Ext</a></li>
</ul></li>
<li class="last"><a class="header" href="#" title="Residential Project Management">Residential</a><ul style="display: block;"><li class="first"><a href="/projects/project-management/residential/house_kinsale" title="House Kinsale">House Kinsale</a></li>
<li><a href="/projects/project-management/residential/house_waterfall" title="House Waterfall" project2="">House Waterfall</a></li>
<li class="last"><a href="/projects/project-management/residential/residence_ballyburden" title="Ballyburden House">Ballyburden House</a></li>
</ul></li>
</ul></li>
<li class=""><a class="header" href="#" title="Grand Solutions">Grand Solutions</a><ul><li class="first"><a href="/projects/grand-solutions/duplicate-of-house-kinsale2" title="House Kinsale">House Kinsale</a></li>
</ul></li>
<li class=""><a class="header" href="#" title="Design & Build">Design & Build</a><ul><li class="first"><a href="/projects/design-build/house-kinsale-03" title="House Kinsale">House Kinsale</a></li>
</ul></li>
<li><a href="/projects/property-risk-management" title="Property Risk Management">Property Risk Management</a></li>
<li class="last"><a href="/projects/engineering-consultancy" title="Engineering Consultancy">Engineering Consultancy</a></li>
</ul>
Note the class ’header’ added to our parent rows.
Finally, the javascript:
<script type="text/javascript">
$(document).ready(function() {
$('#ul_nav a.header').click(function(e){
e.preventDefault();
$(this).css('outline','none');
$(this).next("ul").slideToggle(500);
$(this).next('ul').children('li').children('ul').slideDown(500);
//on the next line we use 'find' rather than 'children' as we want to contract all child UL elements
$(this).parent().siblings("li:has(ul)").find("ul").slideUp(500);
});
});
</script>
There will be a fully working version of this at
Total Project Solutions Ireland in a few days.
