Dropdown Menu Not Working on iPad

[realph]

I wonder if anyone can help me out with this problem I’m having. I’m using a dropdown menu as part of my navigation on this site, and it works fine on the desktop. When you hover over “The Apartments”, the dropdown menu appears.

The problem I’m having is on devices such as the iPad. Because the “The Apartments” parent links to page, when you tap “The Apartments” on the iPad the dropdown menu only appears for a brief second before the next page is loaded, making the dropdown un-viewable on certain devices.

Any idea on how I can solve this problem?

You can view the site here: http://www.zakopanerentals.com/2013

[Paulie_D]

Hover doesn’t work well (if at all) on the Ipad. I think there is a JS solution that makes it a two click event.

Try Google for Hover replacement & Ipad

[Senff]

You can only make this work if you make the top level menu (“The apartments”) NOT a link to another page, or at least not directly clickable, on iPad.

If you want to detect the device and make that different from desktops, OR change it so that it’s not clickable on any device, that’s up to you.

[realph]

@senff That’s what it seems I’m going to have to do, and maybe make “The Apartments” the first child list item.

I’m sure I’ve seen this on other sites though, where you tap for the hover state and tap again to go to the page.

[Paulie_D]

Yeah, as I said, it’s a JS thing to make it do that….I think.

[Senff]

Or responsive! :D

But then it might base things (making them linkable or not) on detecting the screen size, not the device. For that, you’ll definitely have to use JS.

Te actual “first tap = hover, second tap = click” thing was recently discussed here.

[realph]

@senff Is there a way to still retain my opacity transition with this?

[Author]

Posts