T,
Glad you got it up and running though it needs some modifications.
Btw, let me say this first, in case you are wondering: You can name your chunks anything you want (with a few exceptions with regards to characters used, I think). You don’t have to use the same chunk names as used in muddydogpaws. Remember, I am referring to the names of your chunks,
AND NOT the way WF references those chunks, e.g. &outerTpl. So, what am saying is the value you give, for example &outerTpl=`THE NAME OF YOUR CHUNK CAN BE WHAT YOU WANT`
OK, now first thing I notice with your menu is that you have an extra ul tag that you don’t need. Since WF generates an unordered list (ul) you didn’t have to place the snippet call inside <ul> tags like you did in your template. I would change that. If you created the chunks as shown exactly in muddydogpaws (which are just an example - yours can be different) then you notice the
&outerTpl chunk (WHOSE VALUE = cssplay_outer) was already nested in a div. It looks like this
<div[+wf.classes+]>
<ul>
[+wf.wrapper+]
</ul>
</div>
If you created your chunk like this then place the snippet call in your template right after where you have the comment <!--Navigation Part Starts -->. In your template (I mean the template for your website, not the template chunk) there’s no need for the
extra ul tag with the class "mainMenu" nor is there need for
the div with id "navigation" since WF can output this div for you as shown in the chunk above..
See below for my explanation on how to have an id for this div in the chunk.
As for the classes, outerClass should have worked. It is the class for the outer template, i.e. the outerTpl. If you use parentClass you need to note that it will only work if that menu item is a folder (otherwise called a container), i.e. it has children. In your site, the documents that are parents are "Home", "Pledge" and "Press". So, the parentClass value, i.e. the class mainMenu is only being applied to these 3 documents.
Anyway, in the output, if you use outerClass, the value of your outerClass (i.e. "mainMenu") will be added to the div in your outerTpl. WF will substitute the placeholder [+wf.classes+] that comes after the opening div in your outerTpl chunk with this class "mainMenu".
WF has parameters that you can use to add classes to your submenu. In your case, you have told WF that the value for the parameter outerClass is the class to be applied to the submenu. This is incorrect since WF applies outerClass to the outerTpl, i.e. the topmost/highest level of the menu structure. The topmost level of your menu structure according to the code in the chunk
cssplay_outer is the
div. So, your outerClass value, i.e. subNav is being applied to this div. That is why it is not working with your subnav. Since no class is specifically being applied to the subnav, I suppose it is inheriting its styling from the mainNav class
You need to tell WF the correct class to apply to your subnav. You can use the WF class parameter
innerClass.
innerClass: The CSS class name specified in this parameter will appear in the [+wf.classes+] and [+wf.classnames+] placeholders of the &innerTpl template.
In your case, the innerTpl chunk will now look like so:
<ul[+wf.classes+]>[+wf.wrapper+]</ul>
In your snippet call, you can then have
innerClass=`subNav`
Again, in the output, WF will put the class "subNav" right after the opening ul in your submenu
If you want the
div that is in the
&outerTpl chunk (WHOSE VALUE = cssplay_outer) to have the
id "navigation", then add this to the outerTpl chunk like so:
<div id="navigation" [+wf.classes+]>
<ul>
[+wf.wrapper+]
</ul>
</div>
With the above changes, here’s your modified snippet call to add to your template like so:
<!--Navigation Part Starts -->
[[Wayfinder? &startId=`0` &level=`3` &outerClass=`mainMenu` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &innerClass=`subNav` &cssTpl=`cssplay_dropline` &hideSubMenus=`true`]]
<!--Navigation Part Ends -->
Then style to your heart’s content. I hope this is clear....
cheers
