menu from zurb with problem

1,024 Posts

Frank Reply #1, 13 years, 11 months ago

Hi I m tryibg to make a menu work an all devices and browsers, it does not respond well, however it seemd to be just like the example in the docs, Maybe soemone can spot the error?

Here s where the menu is and it actually trying to expand but seems not to manage somehow:

http://barassoboys.eu/maram/

This is what the source should look like

<ul class="nav-bar">
  <li class="active"><a href="#">Nav Item 1</a></li>
  <li class="has-flyout">
    <a href="#">Nav Item 2</a>
    <a href="#" class="flyout-toggle"><span> </span></a>
    <ul class="flyout">
      <li><a href="#">Sub Nav Item 1</a></li>
      <li><a href="#">Sub Nav Item 2</a></li>
      <li><a href="#">Sub Nav 3</a></li>
      <li><a href="#">Sub Nav 4</a></li>
      <li><a href="#">Sub Nav Item 5</a></li>
    </ul>
  </li>
</ul>

Anyone?

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 11 months ago

What does your Wayfinder snippet call look like?

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

☆ A M B ☆
1,780 Posts

Frogabog Reply #3, 13 years, 11 months ago

The menu works as it's intended for me. Using Firefox.

What's it doing that you are having issues with, and in what browser?

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

26 Posts

Wild Eagle Design Reply #4, 13 years, 11 months ago

I tested everything in FireFox, Chrome, IE9, IE8 and IE7.

The only one that had issues is IE7 and it's because of your CSS. IE9 and IE8 browsers are smart enough to fix your CSS, but IE7 is not. It's most likely in your CSS your top position is not set right and that is why the menu disappears when your try to hover on to it.

Wild Eagle Design

www.wildeagledesign.com

26 Posts

Wild Eagle Design Reply #5, 13 years, 11 months ago

Even if there is a one pixel gap IE7 won't allow the mouse cursor to go across. Just viewing your website in Firebug I can see you have a 1px gap. You can see this gap as your top border on your drop down. Scroll your cursor and see how the cursor goes from link to non-link and back to link. This tells IE7 that it's not seamless

Also your .flyout-toggle height is one pixel to tall. Looks like you have to much padding. [ed. note: [email protected] last edited this post 13 years, 11 months ago.]

Wild Eagle Design

www.wildeagledesign.com

1,024 Posts

Frank Reply #6, 13 years, 11 months ago

thanks, for responses will look into all this, error is on FF.

Here is my wf call

        <nav class="main_nav">
          [[!Wayfinder? &startId=`0` 
		  &hereTpl=`hereTpl`
		  &innerTpl=`innerTpl`
		  &outerTpl=`outerTpl`
		  &rowTpl=`rowTpl` 
                  &ParentRowTpl=`ParentRowTpl`
		  &innerRowTpl=`innerRowTpl`
		  &lastClass=`lastClassTpl`
 	      &activeParentRowTpl=`activeParentRowTpl` ]]
        </nav>

chunks:

hereTpl

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

innerTpl

 <!-- innerTpl -->
<ul class="flyout">
[[+wf.wrapper]]

</ul>

outerTpl

<ul class="nav-bar">
	[[+wf.wrapper]]
</ul>

rowTpl

<!-- rowTpllll -->
<li class="has-flyout">
<a href="[[+wf.link]]" title="[[+wf.title]]" >[[+wf.linktext]]</a>	<a href="[[+wf.link]]" class="flyout-toggle" <span></span></a>
[[+wf.wrapper]]	
</li>

ParentRowTpl

<!--parentRowTpl-->
<li class="has-flyout">
	<a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]»</a>
	[[+wf.wrapper]]
</li></ul>

innerRowTpl

<!--inner-row-->
<li><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>

activeParentRowTpl

<!--activeParentRowTpl-->
<li class="has-flyout">
	<a href="[+wf.link+]" title="[[+wf.title]]">[[+wf.linktext]]</a>
	<a href class="flyout-toggle" ="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
	[[+wf.wrapper]]
</li>

lastClassTpl

</ul>

I am however affraid the menu does not work on all IO S s or other Tablets, maybe someone knows a menu that does more or less the same and is good on mobile devices?

390 Posts

odeclas Reply #7, 13 years, 11 months ago

For a Zurb site you would typically have two Wayfinder calls to produce two different menu styles, wrapped in divs that had the hide-on-mobile and show-on-mobile classes added to them (for example to populate a select box instead).

Alternatively,you need to change the CSS based on a media query, to allow for the two menu display variants - horizontal with lists dropping down fixed in position relative to the li, and vertical with an accordion (typically).

ie I doubt Wayfinder is the source of your iOS issue.

Writer > E-consultant > MODx developer || Salesforce || modx 2.x || PHP 5.2.13 || MySQL client 5.0.86

☆ A M B ☆
1,780 Posts

Frogabog Reply #8, 13 years, 11 months ago

What does this call do?

<nav id="main_nav" class="hide-for-small">
          [[!Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &outerClass=`nav-bar` &innerClass=`flyout` &parentClass=`has-flyout`]]
        </nav>

And just to be sure, is this a forum artifact or is this actually in your chunk?

Â»

ParentRowTpl

<!--parentRowTpl-->
<li class="has-flyout">
    <a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]][b]Â»[/b]</a>
    [[+wf.wrapper]]
</li></ul>

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

788 Posts

breezer Reply #9, 13 years, 11 months ago

I also notice a missing closing tag in your rowTpl (also visible in the output page source)

current:
<a href="[[+wf.link]]" class="flyout-toggle" <span></span></a>

fixed:
<a href="[[+wf.link]]" class="flyout-toggle"><span></span></a>

xforum
http://frsbuilders.net (under construction) forum for evolution

☆ A M B ☆
1,780 Posts

Frogabog Reply #10, 13 years, 11 months ago

Quite honestly, I still don't see the problem. The menu works. I tried Chrome too.

I did have a problem with this menu on one install, and for the life of me I could NOT figure out what it was. After replacing and checking with another test installation it appeared that nothing was out of place, but I did not see dropdowns.

I ended up re-installing the whole thing from db backup (after reinstalling Flexibility, just for kicks and giggles... big mistake - do NOT do this).

After that the menu worked great. What weirds me out here is that I really can't see any problem, while you are obviously unable to see the submenu.

You might like the top-nav menu, check out the Foundation docs.

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