Make Menu Dissappear On Clickoff On Tablet

Working in HTML, CSS and JS (technically Angular, if you think it's significant) I have a Header menu with dropdown sub-menus and sub-sub-menus when viewed in desktop style. On a

Solution 1:

You just need to check if click happened outside of dropdown menu.

Something like:

$('html').click(function (e) {
    if (e.target.id == '#yourDropdown') {
        //do nothing and let the click be handled
    } else {
        $('#yourDropdown').hide();
          // still let the click be propagated
    }
});

Solution 2:

Rather then relying on 'mobile browser magic' I would implement it myself. No Angular experience, but in jQuery the code would probably look something like this:

$('.menu li').on('click', function(e) {
    var$target = $(this);
    var$sub = $target.children('ul');

    // only if sub and not yet activeif ($sub.length && ! $target.hasClass('active')) {
        // show sub$target.addClass('active');
        // done
        e.stopPropagation();
        returnfalse;
    }

    // normal click action triggered here
    alert($target.children('a').text());
    e.stopPropagation();
});

$('html').on('click', function(e) {
    // clear all active menu items
    $('.menu > li.active').removeClass('active'); 
});

And a quick example: http://jsfiddle.net/b0aqr1wc/

Solution 3:

:Sigh: A colleague I discussed this with this morning solved this instantly:

Use the "cover sheet" approach, but have the sheet collapse itself at the same time as collapse the menu.

You lose the ability to interact with the underlying page for only 1 tap - and that tap will visibly collapse the menu, so the user will have a prompt to try again.