Hide Submenu on Touch Devices (iPad)

[Manny]

Hi all,

I’m in the process of creating a multi-level dropdown menu, which works great in desktop browsers but has one major problem on touch devices – I’ve been using an iPad for testing.

Having done my research, I’m aware that it may be something to do with using :hover in my CSS due to touch incompatibility.

The menu displays fine on iPad (Chrome & Safari), but what I want to be able to do is hide the submenu content when the user presses somewhere else on the screen. On the desktop, obviously, this is done by just moving the mouse away.

If at all possible, I’d like to avoid using Javascript so it would be great if a solution can be found in pure CSS OR HTML.

Here’s a link to what I have so far. Any help would be greatly appreciated.

http://codepen.io/boltonwebsites/pen/NqeJav

[Manny]

Clearly the way to go about these things is trial and error.

What would you recommend I search the web for in terms of guidance. If I’m better using an alternative approach, I’d like to see some examples that I’d be able to work with.

[Shikkediel]

I put together this a while back for a similar topic (although the main purpose there was to add a delay that allows returning to the menu since this is easier for younger children lacking the eye-hand coordination for a hover menu). It also has the feature where one can click outside it and any open submenus will be hidden :

http://codepen.io/Shikkediel/pen/LEyYpp

It’s all JS though and it might be time for a minor revision.

[Manny]

@Beverleyh The JS you linked to and showed in your example works great, with one exception.

If links in the main menu are left as #, the submenu displays fine. If, however, they actually link to a working URL then a touch sends us to the next page.

Are you aware of any additional JS that would maintain the behaviour shown in your example, but only apply to the submenu.

@Atelierbram I’m with you that the swiftclick menu looks very intriguing. I’m going to have a play around and see whether I can emulate what’s going on. If I can, I’ll embed another CodePen with the solution.

[Manny]

Just to follow up on this – I found a solution at the following URL:

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

If you scroll to the bottom of that page, there is a jQuery plugin called DoubleTapToGo.js. I’ve used it on my code and it works perfectly on iOS devices.

My website is still in the early stages of development so no doubt other problems will arise, but this is a big hurdle solved – at least on the devices I currently have.

Thank you all for your fantastic support.

[Shikkediel]

To be honest, the script doesn’t look that great to me. It is using navigator and browser sniffing which really is a thing of the past. And touchend has not been prevented so unnecessary clicks are fired (but fortunately they don’t do anything).

[Author]

Posts