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.
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
Try Google for Hover replacement & 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.
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.
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.