:hover iOS vs Android

[omgdracula]

Hello Everyone!

So I forgot about this issue since I have not used a hover on a dropdown navigation in a couple years.

On iOS Safari handles :hover in two states on anchors. First click displays the hover state. Second navigates. Android navigates on the first click if the anchor tag is live.

How is this combated nowadays? Do people still use modernizr? Do you keep hover for just dekstop and larger screens? Add a down arrow on mobile just for the dropdown and leave the other anchor as just a link?

What is the go to solution nowadays? I heard using a script is iffy due to more devices being out in the world that support both mouse and touch.

Thanks for the help everyone!

[Beverleyh]

The same behaviour/difference is still present.

One of the easier compromises is to avoid linking all parent buttons, and instead, if needed, duplicate them as the first item in the sub-menu (with a slightly different name).

Example;

• About (no link)
• • About Us (this would link to the main About page)
• • Aims & Vision
• • Company History

But then you also have to deal with the “sticky hover” issue – where the dropdown menu isn’t hidden again until another element receives focus. Here’s one line of JS that may be useful in combating this http://blog.fofwebdesign.co.uk/31-ios-sticky-hover-fix-unhovering-dropdown-css-menus

[omgdracula]

Hey Beverly!

Thanks for the reply. This was the suggestion that I am hoping the client accepts. I figured this was the best way was to make the parent link a dead link and adding in a link to the page as the first item in the dropdown.

Is using JS to detect touch/userAgent kind of a last resort nowadays since now touch devices exist that also take mouse input? I am hoping to do this through CSS or just changing the HTML.

[Beverleyh]

I personally don’t do the (attempted) touch-detection thing either since, like you say, there are overlaps and failure cases.

I would try to use a happy medium (like the no-link parents) that translates across all devices.

I’ve had clients ask too why the top items aren’t linked, but once I explained, and even demonstrated the different :hover behaviours on a handy iPad and Android tablet, they nodded in agreement :)

I have used an arrow-trigger too, but that was on a freebie menu using the checkbox hack http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm
The arrow acts like a visual indicator in mouse environments, but can be tapped on touch, allowing the parent item to be linkable.

[Author]

Posts