WayFinder with submenu

Hello all.

I am relatively new MODx user and I am trying to use WayFinder to manage the navigation for my site.

I have managed to at least get the links to show put I am puzzled about the usage of template chunks, where in the CMS I should create them and where to call for them in WayFinder.

Here is what I am using:

The HTML:

<div class="menu">

[[Wayfinder? &startId=`6` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropline`]]

</div>

The CSS

.menu {
/*position:relative;*/
background-color:#000000;
top:54px;
left:50px;
width:950px;
height:25px;
}

.menu ul li a {
position:relative;
text-decoration:none;
font-family:Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
z-index:1;
left:135px;
margin-right:12px;
top:2px;
color:#ffffff;
float:left;
}

.menu ul li a:hover {
text-decoration:none;
background-color:#00557b;
padding-top:5px;
padding-bottom:5px;
padding-right:3px;
padding-left:3px;
margin-right:6px;
left:132px;
}

.menu ul li a:current {
text-decoration:none;
background-color:#00557b;
padding-top:5px;
padding-bottom:4px;
padding-right:3px;
padding-left:3px;
margin-right:6px;
left:132px;
}



.menu ul li ul {
position:absolute;
background-color:#00557b;
top:80px;
left:50px;
width:950px;
height:25px;

}

.menu ul li ul a {
position:relative;
text-decoration:none;
font-family:Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#ffffff;
z-index:20;
left:135px;
margin-right:12px;
top:2px;
}

.menu ul li ul a:hover {
text-decoration:none;
background-color:#000000;
padding-top:5px;
padding-bottom:5px;
padding-right:3px;
padding-left:3px;
margin-right:6px;
left:132px;
}

.menu ul li ul a:current {
text-decoration:none;
background-color:#000000;
padding-top:5px;
padding-bottom:5px;
padding-right:3px;
padding-left:3px;
margin-right:6px;
left:132px;
}

This how it looks like right now with my limited CMS knowledge:



(I put in the horrible colors so that I know where each div is while I am still developing the frontend)


This is how is should look like with the sub navigation that appears when you click on the link:




Hope someone can give me some advice as to what to do and where.

Thanks,

/Jon Hnefill

Wayfinder template chunks are used t style the individual parts of the menu output. The default output is an unordered list, but with tpl chunks you can change the output to fit your needs.

Template chunks are created and managed just like any other chunk, by going to the Reources > Manage Resources and then select the Chunks tab.

You define the individual template chunks in the wayfinder call by adding &tpl=`chunk name` parameters for each part of the menu you want to alter. In your wayfinder call you have this &parentRowTpl=`cssplay_parentRow`, which is stating to use the chunk named "cssplay_parentRow" to style the "parentRowTpl" part of the menu output.

There is good information on the different template parts available in wayfinder at the developers website and in the MODx wiki.