Grow your CSS skills. Land your dream job.

Dropdown Menu Not Working on iPad

  • # June 10, 2012 at 2:58 pm

    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

    # June 10, 2012 at 3:03 pm

    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

    # June 10, 2012 at 3:11 pm

    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.

    # June 10, 2012 at 3:17 pm

    @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.

    # June 10, 2012 at 3:53 pm

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

    # June 10, 2012 at 4:50 pm

    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.

    # June 10, 2012 at 10:11 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".