CSS Foundation 3 and navigation

Thank you very much pirateghost !
your menu works perfectly !!

I've been struggling with Foundation Nav-Bar as well. Using Menno's Flexibility as a guide, I have the menu working but the drop menus do not work on iPhone and iPad.

I will give your suggestions a try. Thanks for posting. However, you refer to "has-dropdown", and the Foundation Nav-Bar uses "has-flyout". So.. are you using TopBar or NavBar as your navigation menu?

Marc


Quote from: pirateghost at Nov 11, 2012, 08:39 PM

My Foundation navbar:

  <!-- Header and Nav -->

<div class="fixed contain-to-grid">
  <nav class="top-bar">
    <ul>
      <!-- Title Area -->
      <li class="name">
        <h1>
          <a href="[[++site_url]]">
            [[++site_name]]
          </a>
        </h1>
      </li>
      <li class="toggle-topbar"><a href="#"></a></li>
    </ul>

    <section>
      <!-- Left Nav Section -->
      [[Wayfinder?
                &outerClass=`left`
                &selfClass=`active`
    		&innerClass=`dropdown`
		&rowTpl=`navRow`
		&innerRowTpl=`navInnerRow`
		&startId=`0`
		&level=`0`
		&titleOfLinks=``
                &cacheResults=`1`
	]]

      <!-- Right Nav Section (social media links) -->
      <ul class="right">
        <li class="divider"></li>
        <a href="[[getResourceField? &id=`11` &field=`facebook` &processTV=`1`]]" target="_blank" class="fc-webicon facebook has-tip tip-bottom" title="Like us on Facebook" style="margin-top:7px; margin-left:45px;"></a>
	<a href="[[getResourceField? &id=`11` &field=`twitter` &processTV=`1`]]" target="_blank" class="fc-webicon twitter has-tip tip-bottom" title="Follow us on Twitter" style="margin-top:7px; margin-left:7px;"></a>
	<a href="[[getResourceField? &id=`11` &field=`googleplus` &processTV=`1`]]" target="_blank" class="fc-webicon googleplus has-tip tip-bottom" title="Join our circle" style="margin-top:7px; margin-left:7px;"></a>
	<a href="[[getResourceField? &id=`11` &field=`rss` &processTV=`1`]]" target="_blank" class="fc-webicon rss has-tip tip-bottom" title="Get our Feed" style="margin-top:7px; margin-left:7px; margin-right:45px;"></a>

      </ul>
    </section>

  </nav>
</div>

  <!-- End Header and Nav -->

My rowTpl:

<li class="divider"></li>
<li class="[[+wf.classnames]] [[+wf.isfolder:is=`1`:then=`has-dropdown`]]">
    <a href="[[+wf.link]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>
	[[+wf.wrapper]]
</li>

My innerRowTpl:

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

Were you able to get your menu to work?

There is a class called 'flyout-toggle' that applies to the triangle, when needs to be appied in order to get the drop menus to function on iphone and ipad. I've been able to get it to work, but my method causes ALL top level menu items to also receive the class and a null link.

Ideally, the generated html for the parent items should look like this:

<li class="has-flyout"><a href="/books.php">Books</a><a href="#" class="flyout-toggle"><span> </span></a>

<a href="#" class="flyout-toggle"><span> </span></a> is the additional bit of code that allows the triangle to toggle open the drop menus when viewed on mobile devices.

Marc

Quote from: troubadour at Oct 03, 2012, 06:51 AM

ok, i found this for the wayfinder call :

[[!Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &outerTpl=`outerTpl` &outerClass=`nav-bar` &innerClass=`flyout` &parentClass=`has-flyout`]]

but there are missing chunks (outerTpl,...)

i will install the package on a new modx install to see more details.

Were you able to get your menu to work?

There is a class called 'flyout-toggle' that applies to the triangle, when needs to be applied in order to get the drop menus to function on iphone and ipad. I've been able to get it to work, but my method causes ALL top level menu items to also receive the class and a null link.

Ideally, the generated html for the parent items should look like this:

<li class="has-flyout"><a href="/books.php">Books</a><a href="#" class="flyout-toggle"><span> </span></a>

<a href="#" class="flyout-toggle"><span> </span></a> is the additional bit of code that allows the triangle to toggle open the drop menus when viewed on mobile devices.

Marc

Quote from: troubadour at Oct 03, 2012, 06:51 AM

ok, i found this for the wayfinder call :

[[!Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &outerTpl=`outerTpl` &outerClass=`nav-bar` &innerClass=`flyout` &parentClass=`has-flyout`]]

but there are missing chunks (outerTpl,...)

i will install the package on a new modx install to see more details.

hi mmcgee!
i just used the code from pirateghost and it works great.
i checked it on my android phone and tablet. but not on an apple device.
will check it tomorrow.

Hmmmm?
When I use pirateghost innerRow, but change `has-dropdown` to `flyout-toggle`, all this seems to do is add the class, but it does not add the extra needed href for the triangle so that the drop feature functions on iPhone. I can't really tell, but I think pirateghost is using the TopBar rather than the NavBar, though both are nav menus, so the concept should be the same.

I will continue to experiment and hopefully resolve soon.

<li class="divider"></li>
<li class="[[+wf.classnames]] [[+wf.isfolder:is=`1`:then=`has-dropdown`]]">
<a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

Hi !
has anyone improved the mobile navigation ?
i would like to have the menu hidden and just a graphic menu icon to make it drop.
just like the mobile menu of http://foundation.zurb.com/