Drop down menus on touchscreen devices

I’ve got a little curious lately about the nature of support for css driven drop down or flyout menus on touchscreen devices. A bit of Googling yesterday failed to find anything very definitive and found a number of misunderstandings.

The problem

Drop down and flyout menus (like the flyout menu on this site) are driven by hovering the mouse over a parent element (try hovering ‘Photos’ on the left if you can). But of course there is no hover on a touchscreen device. Now, if you use Safari on Apple iOS devices (iPhones, iPads and iPods), it’s clever in this regard, and if the user taps on ‘Photos’ the flyout menu is displayed without moving to the new page. So the pages linked from the dropdown/flyout are still accessible. But on at least some Android tablets, this isn’t the case, if you tap on ‘Photos’ you’ll just go straight to the Photos page (just as you would if you were using a non touchscreen device).

For my particular site, this isn’t a big issue as the Photos ‘sublinks’ are displayed on the Photo page, so a user on an Android tablet can still reach the page, albeit via an intermediate one. But if your site has pages which are accessible only via a dropdown, then the user is both unaware of them and unable to access them.

So I don’t need to worry about Apple devices then?

It isn’t quite as easy as that I’m afraid. By experimentation, using Opera Mini on an iPhone does not give the behaviour above, the dropdown is never displayed. I accept that few people will use that combination however.

Solutions?

I’ve seen a few sites which claim to solve this by the addition of some javascript which in some way replicates the behaviour I’ve described above on Apple devices. The big issue here is that this is going to happen for all users, not just those on touchscreen devices, which introduces additional issues with usability, I think. You might try to detect a touchscreen with the javascript, and do something clever to only trigger this behaviour on a touchscreen device, but it seems to me that reliably detecting the increasing profusion of touchscreens is likely to be difficult (akin to browser detection). So really I’ve come to the conclusion that at the moment the only solution is to provide some sort of submenu that’s displayed on a page.

Summary of the behaviour I’ve noted

Sadly, I don’t have access to every mobile device known to man….but here’s what I can confirm.

Tap on top level menu item displays submenu Apple iPhone 3G/Safari, Apple iPad 3/Safari. Samsung Galaxy Ace/Android Gingerbread

Tap on top level menu item goes straight to that page, no sub-menu: Apple iPhone 1/Opera Mini, Android Tablet/Chrome

Further, if you’re very careful on Android Gingerbread, the dropdown menu does display on a longer hold and it’s then possible (but difficult) to slide your finger on to the submenu and tap on an item. You need to be know the dropdown is going to appear and be ready for it though….so not very user-friendly.

If you’re reading this page on a touchscreen, give it a try and tell me what happens. Especially interested in Windows 8 users.

Tags:

4 responses to “Drop down menus on touchscreen devices”

  1. Pete says:

    Thanks for documenting this Simon, so little information about this and Opencart. On my Nexus 7 and Asus 10 Android this happens, tried it with Chrome and Boat browser. Apple 5 seems ok. Really frustrating as it means you need to activate the category module on the products page.

    Thanks for pointing out this isn’t just an issue with Opencart but with many CSS driven drop-down menus.

  2. Truls says:

    Hi! I ran into this problem while using internet explorer on my Lumia920 (with up to date windows phone 8).Bing (since it’s the default search provider on wp/ie) found this page when i was searching for a solution. On some pages I get a glimpse of the flyout menu when I hold before the windows phone alternate menu drops down (contains open link in new tab ). On other pages (like this one) the flyout menu doesn’t show at all. Tapping just bring me straight to the new page in both cases.

  3. Gwynn says:

    Same problem with a Dell Venue. Trying to use a gradebook website, I’m a teacher. To navigate the website lots of drop down menus but no way to get to the needed section with the touch screen.

  4. John says:

    I’m not sure what you test but on my site dropdown menu’s work on all devices but Safari on iOS. Apple still is struggling getting a simple thing like a dropdown menu working. Silly guys

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.