Here are my notes for setting up pdoMenu to use both the left and right navigation sections of the Zurb Foundation 5 Top-bar
Kudos to Susan for her tips!
Step One:
Create one chunk to contain the top (opening portion of the top-bar navigation), the 2 pdoMenu snippet calls we will build later, and the closing portion of the top-bar navigation menu.
I'm naming this chunk navigationSectionSplit. This is the chunk that goes on the template pages.
Important: With Foundation, if you choose not to put anything in the "Title Area", you must just leave the li blank. If you comment out the li area, the menu will not function properly on small or mobile view.
Chunk for the navigation:
navigationSectionSplit
Insert the following code:
<!--opening tags-->
<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">
<ul class="title-area">
<!-- Title Area -->
<!--<li class="name"><p>Title Here If You Like</p></li>-->
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon">
<a href="#"><span></span></a>
</li>
</ul>
<!-- Right Nav Section -->
<section class="top-bar-section">
<!--Your 2 pdoMenu snippet calls will go below here-->
<!--Your 2 pdoMenu snippet calls will go above here-->
<!--closing tags-->
</section>
</nav>
Create an outer chunk. You only need one.
Name it: navOuterTpl
Call it in both pdoMenu snippet calls like so: &tplOuter=`navOuterTpl`
Enter the following in this chunk.
<ul [[+wf.classes]]>
[[+wf.wrapper]]
</ul>
To differentiate the instances they'll each receive a class.
The top pdoMenu snippet call will get the class .right, like so: $&outerClass=`right`
The bottom pdoMenu snippet call will get the class .left, like so: $&outerClass=`left`
Load order I think is important. Right should be above left. Thus the top pdoMenu snippet call gets the class of right, and the bottom pdoMenu gets the class of left.
Step Three:
Create another chunk for the innerTpl
Name it navInnerTpl and call it in both snippet calls like so: &tplInner=`navInnerTpl`
Enter this code in the chunk.
<ul [[+wf.classes]]>
[[+wf.wrapper]]
</ul>
CSS Classes will need to be applied so that top-bar can style the nav menu if the contents are part of a dropdown.
To handle this, we add &parentClass=`has-dropdown` to both pdoSnippet calls so top-bar can style it properly.
To further the styling, we need to let top-bar know how to style any dropdown items.
Thus, we add &innerClass=`dropdown` to both pdoMenu snippet calls
Step Four:
Create the chunk to handle the ITEMS. Lets just call it navRowTpl.
Enter the following in the chunk.
<li[[+wf.id]][[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Call this chunk in both pdoMenu snippet calls like so: &tpl=`navRowTpl`
Some final css classes we need to add are: .active, .dropdown, and .has-dropdown.
Add these to both pdoMenu snippet calls:
&hereClass=`active`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
Below is my final chunk code for navigationSectionSplit along with some of the foundation markup for the columns. At this point, you can go crazy styling the navigation area and even top-bar itself.
I know there is much more that can be utilized with pdoMenu to further control and organize the menu. Much to learn still.
In my scenario, I wanted everything except for a couple of parent items and one master resource container to appear on the RIGHT. (6 contains, 8 & 21—which were also containers)
On the LEFT side, I wanted the master container 6 and all of it's contents. I solved this by using 0 (everything) and then omitted 3 resources using the &resources and minus signs in front of the id numbers. This took quite a bit of trial and error, and I'm still not convinced it's the best or correct method to do it, but it does appear to be working OK...
Final chunk code for navigationSectionSplit
Call this chunk on your template.
<div class="row">
<div class="large-12 columns">
<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true">
<ul class="title-area">
<!-- Title Area -->
<li class="name"></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon">
<a href="#"><span></span></a>
</li>
</ul>
<!-- Right Nav Section -->
<section class="top-bar-section">
[[pdoMenu?
&parents=`0,-8,-21`
&resources=`-6`
&level=`3`
&tplOuter=`navOuterTpl`
&tplInner=`navInnerTpl`
&tpl=`navRowTpl`
&outerClass=`right`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
&hereClass=`active`
]]
[[pdoMenu?
&parents=`0`
&resources=`-1,-4,-5`
&level=`3`
&tplOuter=`navOuterTpl`
&tplInner=`navInnerTpl`
&tpl=`navRowTpl`
&outerClass=`left`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
&hereClass=`active`
]]
</section>
</nav>
</div>
</div>
If anyone has any improvements or suggestions, please do share.
[ed. note: mmcgee last edited this post 9 years, 1 month ago.]
☆ A M B ☆