The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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?

    # 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 () {

    } //end dropdown click menu touch

Viewing 5 posts - 1 through 5 (of 5 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