Menu icon Foundation
Problem with dropdown menu on ipad

Hi,

I have what I thought was a straightforward application of the Dropdown menu. It works fine on desktop devices (and gets replaced by a hamburger offcanvas affair on mobile). But at ipad resolutions the menu should still be visible and the dropdown elements should work. But they don't.

 

The appear on touch/hover - but they items in the submenu are not clickable. You can emulate this on an ipad or in Chrome emulating ipad responsive view.

 

The url I'm working on is: http://orchard.peterbourne.co.uk/

 

Using latest (stable) version I believe: 6.2.4

 

Any advice as to why this implementation doesn't work on an ipad/touch screen?

 

Many thanks in advance,

 

Peter

dropdown menu ipad touch

Hi,

I have what I thought was a straightforward application of the Dropdown menu. It works fine on desktop devices (and gets replaced by a hamburger offcanvas affair on mobile). But at ipad resolutions the menu should still be visible and the dropdown elements should work. But they don't.

 

The appear on touch/hover - but they items in the submenu are not clickable. You can emulate this on an ipad or in Chrome emulating ipad responsive view.

 

The url I'm working on is: http://orchard.peterbourne.co.uk/

 

Using latest (stable) version I believe: 6.2.4

 

Any advice as to why this implementation doesn't work on an ipad/touch screen?

 

Many thanks in advance,

 

Peter

Steve Teare 10 months ago

Hi - sorry I don't have a solution. I'm just seconding this as being a problem because I am experiencing exactly the same issue on a site I am developing which only exists as a local install currently.

As Peter states, and is observable on his site (nice work btw), the submenu items display OK but tapping on them on an ipad causes the submenu to disappear (as you would expect) but no other action to occur.

Do others have this working OK? I am using Foundation 6.2.3, though I think I tried updating to 6.2.4 but was unclear if the update was effective - I think not.

 

Karin Seifert-Lorenz 10 months ago

Hi - me nether!

I've the same problem, with foundation 6.2.4, so an update won't fix the problem.

The same problem here

49796-dropdown-menu-doesnt-work-with-touch-device

Kamil Paluch 10 months ago

I have the same problem. Using FoundationPress (foundation 6 for wordpress). Any clue on how to fix this would be majorly appreciated!

Steve Teare 10 months ago

Not a solution as such, but something that makes the problem less bad is to set data-close-on-click-inside="false" on the ul for the menu. With that option set, I get the behaviour as follows:

1. Tap on the menu item displays the submenu

2. Tap on submenu item highlights it (I have it set to highlight on hover)

3. Tap on the highlighted (selected) item. or one of the other submenu items, actions that submenu item

This is one more step than I want but at least it means the menu is usable on an ipad.

That did lead me to think that something is happening in the wrong order - i.e. without that option set to false the clicking on a submenu item triggers the close of the submenu so there is then no longer any submenu item to be selected, but I'm not sure if this is so.

In my earlier post (above) I asked if others have this working OK - which turns out to have been a stupid question, because it is working fine on this very page. If you try the menu right at the top of this page on an ipad you get the behaviour I want to get:

1. Tap (for example) on 'Get Involved' - it displays the submenu

2. Tap on (for example) 'Contribute' - it goes to that page

So the obvious question is "what's different on this page compared to my code?" I'm using the same html syntax.

Could it be that this page was built with with an earlier incarnation of Foundation and is therefore unaffected by a bug introduced in the version which I am using?

More likely (tbh) it's my bad - so more investigation needed. I wish I knew how to use the inspector better. Anyway - just thinking out loud in the hope it might trigger an 'aha' moment for someone.

 

 

 

 

Karin Seifert-Lorenz 10 months ago

Hi Steve!

Saved my day! Thank you.

James Bullock 10 months ago

I have the same problem.....

<!-- MENU & TOP NAV COMPONENTS -->
<div class="off-canvas-wrapper">
  	<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
	
    <!-- off-canvas title bar for SMALL MOBILE screen -->
    	<div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="large">
      		<div class="title-bar-left">
        		<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
			</div>
	
			<div class="title-bar-title">
				<ul class="dropdown menu" data-dropdown-menu>
		  			<li class="is-dropdown-submenu-parent">
            			<a href="#">
						<img class="nav-logo-shrinker" alt="..." src="...">
						</a>
            			<ul class="menu" data-submenu>
              				<li><a href="...">Did</a></li>
							<li><a href="...">Anyone</a></li>
							<li><a href="...">At Zurb</a></li>
							<li><a href="...">Test this?</a></li>';

I have also tried using:

 

<li class="has-submenu">
<a href="#">
						<img class="nav-logo-shrinker" alt="..." src="...">
						</a>
            			<ul class="menu submenu vertical" data-submenu>
              				<li><a href="...">WHY WHY WHY?</a></li>

 

Both fail on both iPhone SE ios9 and iPad 4th Gen with ios9......*loud sigh*....It took me WEEKS to get the responsive nav to do what I want, only to find on smaller devices the links don't even work. FFS

Kamil Paluch 10 months ago

I checked foundation docs page and the sample dropdown menu had the same exact issue... 

James Bullock 10 months ago

I just went completely spastic with the data-options and got it to work. Have no idea (have no time to find out!) which is doing the right thing to make it work - but it does on iPhone SE ios9 now.

 

<div class="title-bar-title">
				<ul class="dropdown menu" data-dropdown-menu data-close-on-click="false" data-close-on-click-inside="false">
		  			<li class="has-submenu">
            			<a href="#">
						<img class="nav-logo-shrinker" alt="..." src="...">
						</a>
            			<ul class="menu submenu vertical" data-submenu data-close-on-click="false" data-close-on-click-inside="false" data-force-follow="true">
              				<li><a href="...">I need a holiday from foundation fatigue</a></li>

Peter Bourne 10 months ago

Steve,

You've got it! Thank you. Or at least you've got a working solution.

You're right more investigation is needed - I've used a similar construction on other sites without issue - I went to check once this issue was highlighted to me.... worried that other recent sites were affected too. They weren't. Which points to difference in code - positioning of elements (absolute|relative etc)... but the actual menu is pretty much identical on other sites... it may just be sitting in a different type of container/page construction.

 

Anyway - adding

data-close-on-click-inside="false"

to the ul with that contains the menu, thus:

<ul class="menu dropdown" id="top-menu" data-dropdown-menu data-close-on-click-inside="false">

fixed it!

 

Many thanks,

 

Peter

Steve Teare 10 months ago

I've put up a codepen that illustrates this problem (using 6.2.4):

http://codepen.io/Byzantium/pen/oYMbmx

I deliberately left the CSS blank so it can't be a problem with my styling.

On a PC/mac you can click the submenu items fine (will go to a 404)

On ipad a tap on the parent menu opens the submenu, but a tap on one of the submenu items causes the submenu to close with no action taken.

If anyone finds it useful I also put up a template: http://codepen.io/Byzantium/pen/jVpWxK which you can fork to have a ready configured 6.2.4 environment in Codepen. Hope I did it right - I'm sure someone will let me know if not!

 

 

 

Kamil Paluch 10 months ago

data-close-on-click-inside="false"

fixes it! Thanks for the help with this Peter and James!

 

If anyone lands here looking for answer for FoundationPress, then you are looking to modify this file: "wp-content-themes/FoundationPress/library/navigation.php"

 

Good luck

Steve Teare 9 months ago

So - the thing with setting data-close-on-click-inside="false" on the ul for the menu

is a workaround rather than a fix, because it means it takes an extra step to access a submenu item.

However, from poking around (I am not an insider) it looks to me that this https://github.com/zurb/foundation-sites/pull/9472/files is a fix - to be incorporated in the next release (6.3)

That's how it looks to me...

 

Peter Bourne 9 months ago

Steve,

Agreed (on the workaround vs fix)... and here's hoping to the fix in 6.3....

Thanks,

Peter

Peter Bourne 9 months ago

Problem still exists in 6.3 (different site I'm working on - but same issue).

Same workaround works though.

 

Steve Teare 9 months ago

I believe a fix has been done and committed so should be in 6.3.1

https://github.com/zurb/foundation-sites/issues/9484

Laszlo Molnar 8 months ago

I had to patch the click handler a bit to make it work (version 6.3):

        // used for onClick and in the keyboard handlers
        var handleClickFn = function (e) {
          var $elem = $(e.target).parentsUntil('ul', '.' + parClass),
              hasSub = $elem.hasClass(parClass),
              hasClicked = $elem.attr('data-is-click') === 'true',
              $sub = $elem.children('.is-dropdown-submenu');

          if (hasSub) {
            if (hasClicked) {
              if (!_this.options.closeOnClick || !_this.options.clickOpen && !hasTouch || _this.options.forceFollow && hasTouch) {
                return;
              } else {
                e.stopImmediatePropagation();
                e.preventDefault();
                _this._hide($elem);
              }
            } else {
              e.preventDefault();
              e.stopImmediatePropagation();
              _this._show($sub);
              $elem.add($elem.parentsUntil(_this.$element, '.' + parClass)).attr('data-is-click', true);
            }
          } /* Added by Laza :: Fixing touch clicks  */
            else if (hasTouch && e.target.nodeName === 'A') {
          	window.location.href = e.target.href;
          }
        };

Paul 7 months ago

Just adding to the chorus that I have experienced the same problem in Foundation 6.3. Adding:

data-close-on-click-inside

to the <ul> also fixed the problem for me. Hopefully this bug will be fixed in the next release.

 

Leif Birnbaum 12 days ago

I'm running the latest version of foundation and am having this problem only on ipad. You can click the dropdown and the dropdown appears, but click any of the links in the dropdown and nothing happens.

 

visitcookcounty.com