Need help converting navigation to wayfinder

48 Posts

scottmccullough Reply #1, 10 years, 11 months ago

I am using Revo to develop a site using Zurb Foundation 4 framework. The following code is the ZF dropdown navigation. I have tried multiple times to try to incorporate wayfinder by following the online examples, but I have finally surrendered without success. If anyone has had any experience in this area, I would be very grateful if you could help out. Thanks. Scott.

<nav class="top-bar">
<ul class="title-area">

<!-- Title Area -->

<li class="name"></li>
                                
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>

</ul>
                            
<section class="top-bar-section">
                                                               
<ul class="left">
                                    
<!-- MENU ITEM #1 -->

<li class="has-dropdown"><a href="#">About Us</a>
                                        
<ul class="dropdown">
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
</ul>

</li>
                                  
</ul>
                          
</section>

</nav>

211 Posts

Nir Zohar Reply #2, 10 years, 11 months ago

You can hard code the title-area ul.
For the ul class="left", use parentClass=`has-dropdown` and innerClass=`dropdown`.

48 Posts

scottmccullough Reply #3, 10 years, 11 months ago

Thanks, but unfortunately this still does not give the desired results.

 [[Wayfinder? 
&startId=`0` 
&level=`2` 
&rowTpl=`rowTpl` 
&outerTpl=`outerTpl` 
&parentRowTpl=`parentRow` 
&innerRowTpl=`innerRowTpl` 
&parentclass=`has-dropdown` 
&innerclass=`dropdown`]]

<!-- rowTpl -->
<li class="has-dropdown"[[+wf.id]][[+wf.classes]]>
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

<!-- outerTpl -->
<ul class="left"[[+wf.classes]]>
[[+wf.wrapper]]
</ul>

<!-- ParentRow -->
<li>
<a href="[[+wf.link]]">[[+wf.linktext]]</a> - [[+wf.description]]
[[+wf.wrapper]]
</li>

<!-- innerRowTpl -->
<li><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Everything is piling up on a single level, no dropdown.Quote from: nir-z at May 21, 2013, 05:11 AM

You can hard code the title-area ul.
For the ul class="left", use parentClass=`has-dropdown` and innerClass=`dropdown`.

[ed. note: scottmccullough last edited this post 10 years, 11 months ago.]

211 Posts

Nir Zohar Reply #4, 10 years, 11 months ago

Check the js and css paths.
Can you show the actual html output of the menu?

48 Posts

scottmccullough Reply #5, 10 years, 11 months ago

Here is the html output from the snippet call. I've also attached a screenshot of the browser output. All the other css and js seem to be working correctly, so I assume the paths are ok. Thanks.

<!-- outerTpl -->
<ul class="left">
<!-- rowTpl -->
<li class="has-dropdown" class="first">
<a href="index.php?id=6" title="About Us" >About Us</a>

</li>
<!-- rowTpl -->
<li class="has-dropdown" class="active">
<a href="index.php?id=9" title="Page 2" >Page 2</a>
<!-- outerTpl -->
<ul class="left">
<!-- innerRowTpl -->
<li><a href="index.php?id=8">Why Farmland</a></li>

<!-- innerRowTpl -->
<li><a href="index.php?id=5">Investment Fundamentals</a></li>

<!-- innerRowTpl -->
<li><a href="index.php?id=4">The Problem</a></li>

<!-- innerRowTpl -->
<li><a href="index.php?id=15">The Opportunity</a></li>


</ul>
</li>
<!-- rowTpl -->
<li class="has-dropdown">
<a href="index.php?id=10" title="Page 3" >Page 3</a>

</li>
<!-- rowTpl -->
<li class="has-dropdown">
<a href="index.php?id=11" title="Page 4" >Page 4</a>

</li>
-- rowTpl -->
<li class="has-dropdown" class="last">
<a href="index.php?id=12" title="Page 5" >Page 5</a>
<!-- outerTpl -->
<ul class="left">
<!-- innerRowTpl -->
<li><a href="index.php?id=7">721 Exchange</a></li>

<!-- innerRowTpl -->
<li><a href="index.php?id=3">Five Estate Planning Mistakes</a></li>


</ul>
</li>

</ul>

Quote from: nir-z at May 21, 2013, 05:11 AM

You can hard code the title-area ul.
For the ul class="left", use parentClass=`has-dropdown` and innerClass=`dropdown`.

211 Posts

Nir Zohar Reply #6, 10 years, 11 months ago

The structure seems okay.
I think (based on the image) that your dropdown ul children are floated left, maybe from somewhere else in your css.

48 Posts

scottmccullough Reply #7, 10 years, 11 months ago

What you see is the basic zurb foundation CSS. No style changes have been made.

☆ A M B ☆
350 Posts

Menno Pietersen Reply #8, 10 years, 9 months ago

So this works for me and I am adding it to the Flexibility 4 template http://flexibilitymodx.com/.

Wayfinder call

[[Wayfinder?
&startId=`0`
&level=`3`
&outerTpl=`main_nav_outerTpl`
&innerTpl=`main_nav_innerTpl`
&outerClass=`top-bar`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
]]

main_nav_outerTpl chunk

<ul id="topnav"[[+wf.classes]]>
	<ul class="title-area">
		<!-- Title Area -->
		<li class="name"><h1><a href="#">[[*pagetitle]]</a></h1></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>

	<section class="top-bar-section">
		<ul class="left">
			[[+wf.wrapper]]
		</ul>
	</section>
</ul>

main_nav_innerTpl chunk

<ul[[+wf.classes]]>
	[[+wf.wrapper]]
</ul>

[ed. note: ThaClown last edited this post 10 years, 9 months ago.]

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

1,078 Posts

mmcgee Reply #9, 10 years, 3 months ago

Hi Menno:

I am trying to incorporate Top-Bar into a site and this more or less the cofiguration that I am trying to create — except that I will be omitting the title. I'll only be using one of the the section classes and will eventually be centering the menu items. I've figured out the centering aspect I think, but have a question about your wayfinder setup. Are you only using 2 chunks total: outerTpl and innerTpl. When I worked with you around the time of Foundation 3 and the nav-bar, I ended up creating 5 separate chunks. Not sure why, but it worked for that situation.

If you can clarify how many chunks you're using, that would be very helpful to me and greatly appreciated.

Thanks,

Marc

Quote from: ThaClown at Jul 23, 2013, 01:46 PM

So this works for me and I am adding it to the Flexibility 4 template http://flexibilitymodx.com/.

Wayfinder call

[[Wayfinder?
&startId=`0`
&level=`3`
&outerTpl=`main_nav_outerTpl`
&innerTpl=`main_nav_innerTpl`
&outerClass=`top-bar`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
]]

main_nav_outerTpl chunk

<ul id="topnav" [[+wf.classes]]="">
	<ul class="title-area">
		<!-- Title Area -->
		<li class="name"><h1><a href="#">[[*pagetitle]]</a></h1></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>

	<section class="top-bar-section">
		<ul class="left">
			[[+wf.wrapper]]
		</ul>
	</section>
</ul>

main_nav_innerTpl chunk

<ul[[+wf.classes]]>
	[[+wf.wrapper]]

</ul[[+wf.classes]]>

1,078 Posts

mmcgee Reply #10, 10 years, 3 months ago

Hi Menno:

I created my 2 Tpl files and inserted the wayfinder call and it almost works for me. Problem #1. The toggle menu doesn't toggle open the menu on small.

Problem #2... there is extra space on the left, perhaps because of the empty li. Foundation 5 docs said if you don't want a title, just delete the name. But, perhaps I need to delete the entire ul and li for the title area.

Will keep fiddling here to see if I can make work. Odd that the toggle link won't work. I tried removing the span tags that you showed and typed the word "Menu" and still would not toggle open.