Zurb foundation Wayfinder iPad iPhone issue

92 Posts

showa26 Reply #11, 13 years, 9 months ago

This is my rowTpl:

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
<a href="[[+wf.link]]" class="flyout-toggle"><span></span></a>
[[+wf.wrapper]]
</li>

I have also tried your solution, and I did put class="flyout-toggle" in all kind of places.
I also think has to be put in.

Making a code like this:

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
<a href="[[+wf.link]]" class="flyout-toggle"><span></span>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

You end up with a double navbar.

Inspecting the element it is obvious that the second a href makes the triangle in the navbar effective.

[ed. note: showa26 last edited this post 13 years, 9 months ago.]

1,024 Posts

Frank Reply #12, 13 years, 9 months ago

Quote from: showa26 at Dec 16, 2012, 11:01 AM

This is my rowTpl:

<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>
<a href="[[+wf.link]]" class="flyout-toggle"></a>
[[+wf.wrapper]]
I have also tried your solution, and I did put class="flyout-toggle" in all kind of places.
I also think has to be put in.

Making a code like this:

<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>
<a href="[[+wf.link]]" class="flyout-toggle">[[+wf.linktext]]</a>
[[+wf.wrapper]]
You end up with a double navbar.

Inspecting the element it is obvious that the second a href makes the triangle in the navbar effective.

</li[[+wf.id]]></li[[+wf.id]]>

Weel in the doc of zurb flyout-toggle actually does have a value in the CSS. In the modx port there s no value as far as I can see. This is what I found, try adding it in the CSS

.nav-bar > li.has-flyout > a.flyout-toggle {
position: absolute;
right: 0;
top: 0;
padding: 22px;
z-index: 2;
display: block;
}

Found that here:http://foundation.zurb.com/docs/f2/ui.php#vertical2 Let me know what happens please.

92 Posts

showa26 Reply #13, 13 years, 9 months ago

No success, nothing changed!

I found the code in foundation.min.css, so it is there. [ed. note: showa26 last edited this post 13 years, 9 months ago.]

☆ A M B ☆
1,780 Posts

Frogabog Reply #14, 13 years, 9 months ago

It seems logical that adding the empty a href and span produces an extra line. When I change the chunk to:

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
<a href="[[+wf.link]]" class="flyout-toggle"><span></span>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

I get a duplicate li for everything including the top level li items, even those without submenus. Before when I added the extra li with the flyout-toggle class and span, I was just seeing a blank li in the submenus.

I've added the css too. I can see it functioning in the Foundation doc page when I inspect it, although there's an important declaration added (border-left: 0 !important;) and the padding is 20px instead of 22px.

It has something to do with the wf.link and wf.linktext placeholders I think. Wayfinder is doing it's job and producing li items with text (for me)as it's being told to do. Twice, exactly as it's being directed. Removing wf.link and wf.linktext and leaving just the a href="#" or a href="" produces the same result.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

92 Posts

showa26 Reply #15, 13 years, 9 months ago

If you use "#" or "" the pages are not redirected when you click the blank menu parts, using +wf.link they are. In a touchscreen they don't react at all in the empty menu fields, [[+wf.linktext]] is needed to put names in them.

I also added [[+wf.title]] in the second a href without a problem.

In my opinion the problem is in [[+wf.attributes]] and the combination [[+wf.linktext]]. Without [[+wf.attributes]] the nav bar doesn't function. Without the toggle triangle doesn't function.

1,078 Posts

mmcgee Reply #16, 13 years, 6 months ago

I've been searching days now for a solution to this very thing. Did you ever figure this out?

92 Posts

showa26 Reply #17, 13 years, 6 months ago

If you put the following code in your rowtpl the menu works on tablets and phones as stated before. The disadvantage is that you get extra empty fields in the drop down.

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
<a href="[[+wf.link]]" title="[[+wf.title]]" class="flyout-toggle"><span></span></a>
[[+wf.wrapper]] 
</li>

discuss.answer

1,078 Posts

mmcgee Reply #18, 13 years, 6 months ago

I don't know if I have approached this correctly, so don't gasp when you see my work. This works on iPhone and iPad.

TIP: make sure you're triangle is a visible color so the user will see and hopefully know to click to open the menu.

Here's my wayfinder call:

[[!Wayfinder? &startId=`0`
&rowTpl=`bhrowTpl`
&innerTpl=`bhinnerTpl`
&outerTpl=`bhouterTpl`
&parentRowTpl=`bhParentRow`
&innerRowTpl=`bhinnerRowTpl`
&outerClass=`nav-bar`
&innerClass=`flyout`
&parentClass=`has-flyout`
]]

Here are my Tpl chunks:


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


<ul class="[[+wf.classnames]]">
[[+wf.wrapper]]
</ul>


<ul class="[[+wf.classnames]]">
[[+wf.wrapper]]
</ul>


<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a><a href="#" class="flyout-toggle"> </a>
[[+wf.wrapper]]
</li>


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

Code above has been updated slightly—adding [[+wf.id]] just after the li in each of the Row Tpls. Honestly, I only did that because Menno had done so in his Row call. Nothing gets generated in the html, so I don't know why it's there. I may just delete those unless I discover that is does actually serve some necessary or beneficial function.

[[+wf.id]] is supposed to insert the unique id specified in the &id property. Still makes no sense. Why would I want a unique id to be inserted right after <li and before class='..."?

I fixed the hover problem with my font color not changing on hover by writing a new rule in the foundation nav-bar CSS.
.nav-bar > li > a:hover { color: #966e40; } [ed. note: mmcgee last edited this post 13 years, 6 months ago.]

1,078 Posts

mmcgee Reply #19, 13 years, 6 months ago

I found this rule in the Foundation 3 CSS

.nav-bar > li:hover { color: #966e40; background: #fff; }

I'm reworked my menu to to have white backgrounds. For kicks, I changed the background color of this hover rule to an obvious color that would stand out, and voila! The hover state actually was working. Sort of.

The font color however is NOT working. I changed the color—again to something obvious, and still no change, but the background changes color.

So I wrote a new rule: .nav-bar > li > a:hover { color: #966e40; } and now the hover state changes the color of the font the way I wanted.

I still don't understand what's going on here. It doesn't make sense. Why would my hover states work fine in the drop menus, but not up on the top level menus. Yet the top level sort of works. The background color changes on hover, but not the font color. Hmmm?

My writing of the new rule seems kind of like magic numbers. Solves the immediate issue, but doesn't really fix the root problem. Then again. It's working!

92 Posts

showa26 Reply #20, 13 years, 6 months ago

Menu problem completely solved with mmcgee's solution.

Thank you! [ed. note: showa26 last edited this post 13 years, 6 months ago.]

Answered Zurb foundation Wayfinder iPad iPhone issue