Get a free trial // Grow your CSS skills // Land your dream job

[Solved] CSS Dropdown menu — for the iPad?

  • # June 10, 2013 at 11:38 am

    I found that using opacity:0 and then opacity:1 on :hover with a CSS3 transition causes the rollover to break on iPad, so I basically just used a mobile detection script in PHP, and then updated my dropdown class to have display:none, and made sure the :hover state had display:block as well as opacity:1.

    # June 10, 2013 at 7:11 pm

    This is exactly what you need…

    # June 11, 2013 at 4:48 pm

    Jeyjoo’s technique was a winner for me. thx

    # June 21, 2013 at 4:25 am

    GREAT!!! Jeyjoo has a very good solution. It works for me. Thanks.

    # July 2, 2013 at 6:04 am

    Guys, here in Europe Android is currently taking between 65 top 75% of market share. These tricks dont work as easily on Android.

    Why on earth would one develop for iPhone and forget Android?
    You may like iPhone betetr than Android, but if 2/3 of users is using Android, then you are not doing it right.

    I checked Jeyloos solution, and on android it doesn behave very logical.
    You have to long-press the menu before the dropdown shows.

    My opinion is that one should try and avoid submenu’s on pages if possible.
    For existing ages you can try Jeyloos technique, but its still not perfect.
    Maybe there isa better trick for Android as well?

    # September 24, 2013 at 5:44 pm

    BIG UP Jeyjoo!!!!!! Thnks a lot!!!!

    # December 18, 2014 at 5:08 pm

    @decadeofdefeat Brilliant! I was losing hair by the minute until I found this. Same problem, great solution!

    # December 23, 2014 at 12:19 am

    Thankyou so much Jeyjoo!

    # January 9, 2015 at 10:17 pm

    jeyjoo’s solution works great for getting the dropdown to appear, but does anyone know how to get the dropdown to disappear when clicking outside it?

    in other words, i can get my dropdown to now appear, but cannot get it to disappear.

    # March 16, 2015 at 1:42 pm

    please help
    where is exactly the place, where should I put “onClick=”return true” ?
    I use drupal 7 + CorporateClean theme
    and my menus do not drop down on Ipads
    unforunately I do not know anything about js

    # March 18, 2015 at 10:41 am

    I know this topic has been solved however thought I’d share my CSS hack for anyone not familiar with JS.

    This isn’t a 100% fix as there are a couple of issues to resolve however it will work across browsers & iPad.

    Here the codepen:

    The demo is a very basic css dropdown menu. I’ve used pointer-events to prevent the nav link being clickable except for on the iPad, where I’ve used media queries restricted by the iPads exact dimensions to allow clicking through.

    Issues to overcome:
    * pointer-events won’t work on IE so the link will be clickable.
    * On iPad after opening the dropdown the link will be clickable.
    * If there’s another touch device with the same dimensions it will be affected.

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed