Grow your CSS skills. Land your dream job.

[Solved] CSS Dropdown menu — for the iPad?

  • # March 27, 2011 at 4:55 pm

    http://3rconcepts.com/test

    Client has suddenly asked for the site to be iPad compatible … I figured no big deal, iPad has a grown up browser, if it works in Safari it works on iPad … whoops. You can’t hover on an iPad, so my drop downs aren’t showing up. Is there a quick to moderately quick fix for this? Or should I just build another header with a different menu system and throw it up on ipad.3rconcepts.com or something?

    Thanks.

    # March 27, 2011 at 11:30 pm

    I’m wondering if you can make it work using javascript.

    For example, go to http://www.woot.com on your ipad or iphone – If you look at the 4 blocks of “other woots” on the right, they have a hover status that shows a little text bubble of what the item is.

    On the ipad/iphone, when you tap any of those links, instead of just going there, the first tap brings up that more info bubble. A second tap follows the link.

    Could one do something similar on purpose using a javascript based rollover drop down? I’m definitely no expert in javascript so this is just me thinking out loud :)

    # March 28, 2011 at 2:02 am

    hovers for normal browsers. clicks for mobile devices.

    # March 28, 2011 at 9:06 am

    Soap — could you elaborate on what you just said? I don’t think I’ve ever used clicks? like a:click {}?

    # March 28, 2011 at 1:41 pm

    Hmmm, not working at all?

    On my iPhone if I click on a menu that has a drop down, it’ll show me the drop down and then I have to click again for my page choice.

    jhl
    # March 29, 2011 at 4:42 pm

    alternatively you can use :focus

    # March 29, 2011 at 9:10 pm

    JHL & Soap. I’m new to CSS could you elaborate on what you mean when you say click and focus? I don’t have the strongest understanding of all variables just yet :/

    # March 30, 2011 at 12:06 am

    They mean that Mobile Safari translates the drop down menu’s hover to work with a click. Meaning that when you are using Mobile Safari you press once on the drop down for it to open, and then again on your selection.

    # March 31, 2011 at 7:32 am

    Check out http://www.cssplay.co.uk. Stu has developed a lot of css only menus for mobile and ipad browsers.

    # September 11, 2011 at 2:47 pm

    this above link http://3rconcepts.com/test goto ERROR 404 – PAGE NOT FOUND

    # March 27, 2012 at 2:44 pm

    Could someone clarify: does this mean the drop-menu will NOT work in Safari mobile, or only that its slightly more cumbersome?

    # March 27, 2012 at 3:59 pm

    A hover drop down won’t work (because there is no hover) however, the way I’ve had success with menus is converting them into full on drop downs.

    # April 26, 2012 at 4:10 pm

    Has anyone come up with a solution for this? I have a drop down menu that displays the submenu on hover of a parent element.
    I use jquery to disable default behavior so that on click of the parent element the submenu is shown. But now I want on the second click the default behavior to be enabled again. Anyone any ideas. This is the code I use to prevent default behavior:

    Cheers,
    Michael

    # April 27, 2012 at 11:50 am

    ????

    # February 7, 2013 at 6:28 am

    Here is the simplest solution I found. Adding the following line inside to your span, li or anchor causes the iPad to behave like safari on mac and onclick open the dropdown

    onClick=”return true”

    So on tap, the dropdown opens on iPad.

    See it in action here – http://www.naturalsal.it/

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

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