Grow your CSS skills. Land your dream job.

Mobile platform menus. Click once. Click twice.

  • # September 21, 2012 at 12:30 am

    Mobile platforms such as iOS Safari have this way of deciding if a link should get one or two clicks before it’s followed. Here’s an example.

    `

    `

    Depending upon how your hovers are set up, iOS might require two clicks on Top and one on Sub.

    Does anyone know a direct way of controlling this? I have a case where leaving it up to the automatic settings isn’t working the way I want it to.

    # September 21, 2012 at 12:37 am

    If the link has a hover state it will require two clicks.

    If you don’t want two clicks, make sure that your mobile visitors don’t get a hover state.

    # September 26, 2012 at 12:30 am

    Good call Doc. It’s that simple, eh?

    # May 28, 2013 at 8:51 pm

    Anyone know how to achieve this for tablet device only?
    thanks

    # June 6, 2013 at 12:57 pm

    This is old but in case anyone was wondering:

    if (“ontouchstart” in document.documentElement) {

    $(document).ready(function () {
    $(‘.class-with-hover’).click(function () {
    $(this).children(‘ul’).slideToggle();
    });
    });

    } //end dropdown click menu touch

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

You must be logged in to reply to this topic.

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