Menu icon Foundation
F6-Mobile Drop Down Menu Failure

Greetings. I have site ready to make live, uploaded for testing, coded with fresh Foundation 6.3.0 template (did not re-use code from Foundation 5).

Issue: drop down menu, does not function on (my) android mobile tablet, phone or iPad tablet.

Works fine when using laptop/pc.

Site is here: http://temp.advancedcarepethospital.com/index.html

Began with F6 6.3.0 template, added top bar with drop downs found here: http://zurb.com/building-blocks/f6-top-bar

Added all CSS from that example to my app.css. Other .css files are unaltered. The .js files are from 6.3.0 and untouched. 

Your help is greatly appreciated! My wife & I own the pet hospital. I wanted to simplify and speed up our site previously coded with Foundation 5.

 

navigation

Greetings. I have site ready to make live, uploaded for testing, coded with fresh Foundation 6.3.0 template (did not re-use code from Foundation 5).

Issue: drop down menu, does not function on (my) android mobile tablet, phone or iPad tablet.

Works fine when using laptop/pc.

Site is here: http://temp.advancedcarepethospital.com/index.html

Began with F6 6.3.0 template, added top bar with drop downs found here: http://zurb.com/building-blocks/f6-top-bar

Added all CSS from that example to my app.css. Other .css files are unaltered. The .js files are from 6.3.0 and untouched. 

Your help is greatly appreciated! My wife & I own the pet hospital. I wanted to simplify and speed up our site previously coded with Foundation 5.

 

Val Ery over 2 years ago

Hi Thomas!

This example is suitable? - http://codepen.io/Val_Ery/pen/YNomGV

Thomas Gerds over 2 years ago

I found this workaround successful as well:

http://codepen.io/sinspiral/pen/zoboPp

 

Thank You for your assistance!

 

Eskimo Tom

Val Ery over 2 years ago

OK, Thomas!

1. Copy code from  http://codepen.io/sinspiral/pen/zoboPp

2. Before ul with class="dropdown menu" add block

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="main-menu"></button>
</div>

Important: attribute "main-menu" - there must be an element identifier, which will apply the action (hide / show)

3. Add id="main-menu" to ul

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle="main-menu"></button>
</div>
<ul id="main-menu" class="dropdown menu" data-dropdown-menu data-close-on-click-inside>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="http://foundation.zurb.com" target="_blank">Item 1A</a></li>
      <li><a href="http://foundation.zurb.com" target="_blank">Item 2A</a></li>
      <li><a href="http://foundation.zurb.com" target="_blank">Item 3A</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

Now ... You will get a menu like on your site. Only (as opposed to the site) is now working toggler. The problem - if the menu items contain long names, they probably will not fit in the screen of the phone.

Thomas Gerds over 2 years ago

Val - Bravo!

I like your solution on Code pen: http://codepen.io/Val_Ery/pen/YNomGV, I'm playing with it more.

My preference is to have the color bar run full screen width, while also having the phone # "block" and menu drop downs, align or appear within the sites body width.

Question: Do I fix this with the Row and Column in the html, or is it a .css fix?

My knowledge is limited, thank you.

 

eskimotom

Thomas Gerds over 2 years ago

2.21.2017 9:31 PM Central Time USA - uploaded the menu on this Codepen to temp site index and it did NOT work on mobile. Yes it works fine on the computer, just not mobile.

eskimotom

Thomas Gerds over 2 years ago

For me this was the key: data-close-on-click-inside

As in:

<ul id="main-menu" class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-close-on-click-inside>

without: data-close-on-click-inside, linking on mobile failed. Works fine now.

Val Ery over 2 years ago

Hi Thomas!
I want to apologize: the example on codepen.io I did with the possibility of adding a sticky menu. Therefore, there is present a block that limits the width to 1200 pixels.
"Pure" menu is here.

I looked at your temporary site. Mobile menu works.
I saw only one problem: when the page is loaded there are two menus (mobile with an icon and the usual dropdown). Solution of the problem described herein - Preventing FOUC

Val Ery over 2 years ago

Default value for data-attribute:

a) dropdowm menu  - "data-close-on-click" and "data-close-on-click-inside" is "true"

b) drilldowm menu (for mobile) - "data-close-on-click" is "false"

Why not working mobile menu without data-attribute "data-close-on-click-inside" I do not understand. You can try playing with the values true/false if interested.

Thomas Gerds over 2 years ago

It DOES WORK with "data-close-on-click-inside" now, on both my android and iPad. I had to add that line to your original codepen you crafted, in order to get menu to work, on mobile, on my temp site.

Without the line, it did not work. Your original codepen you crafted was missing these 5 words (I believe).

I did not use true or false, but it does function.

Edgardo over 2 years ago

Translated by Google Translator

Hi Val-Ery

Very good solution your proposal: https://codepen.io/Val_Ery/pen/YNomGV.

I have a drawback, if I render in small in chrome or firefox (I have not tried in others), and then I widen the window to medium or large, the submenu are not displayed. If I update with F5 when my browser window is more than 640px, everything works correctly.

You can see what happens at: http://www.rumboservicios.com.ar/clientes/rotortanques/

Do you have any idea why this happens?

From already thank you very much.

Greetings.

Texto Original: 

Hola Val-Ery 

Muy buena solución tu propuesta: https://codepen.io/Val_Ery/pen/YNomGV . 

Tengo un inconveniente, si renderizo en small en chrome o firefox (no he probado en otros), y luego ensancho la ventana a medium o large, no se muestran los submenú. Si actualizo con F5 estando la ventana de mi navegador en más de 640px, todo funciona correctamente. 

Puedes ver lo que sucede en : http://www.rumboservicios.com.ar/clientes/rotortanques/ 

Tienes idea por qué sucede? 

Desde ya muchas gracias. 

Saludos. 

Val Ery over 2 years ago

 Hi Edgardo!

Yes you are right. There is a problem. It appears on version 6.3.1. My old example (https://codepen.io/Val_Ery/pen/YNomGV) when changing version to 6.3.1 displays a drop-down menu in the same way as you described.

Try to return to version 6.3.0 :(
And be sure to report the problem to the developers.