Make menu dissappear on clickoff on tablet

Question

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 PC the sub-menus appear on hover and clicking on the entry takes you somewhere.
  • Clicking on the root entry takes you somewhere different - so it has 2 purposes in life: be a link to a location AND be the hover trigger for the dropdown menu.
• Not all root elements have a sub-menu.
• There's a separate mobile menu, based on width media queries, but Tablets (especially in landscape mode) display in desktop style, and it's giving me gyp!

On tablets (tested in Safari iOS and in Chrome for iPad) the browser does some deep magic!...

• For elements that have No dropdown then clicking on them takes you to the link.
• For elements that DO have a dropdown sub-menu, then
  • the first click has the effect of activating the hover - it doesn't activate the link but does reveal the menu.
  • The second click then activates the link.

Lovely!

Problem is... the menus don't disappear if you tap off them.

• Tapping the page in general does nothing (no click-event raised)
• Tapping something on the page that is clickable DOES clear the menu, and also invokes the click action for whatever you clicked.

My first thought was to put a transparent div across the whole rest of the page, above the page but below the menu, and bind a click event that would clear the menu. But, I can't get the transparent layer AND the underlying page to both be clicked. See here for the problems I hit there.

Putting the click event on body (so that it gets triggered by bubble up) doesn't work (click event just isn't fired.)

I tried adding ngTouch, and that does cause click events to be triggered everywhere, but also breaks the behaviour of the sub-menus opening - all the links trigger immeidately and you can't reach the sub-menus.

Any thoughts at all? Help!

Answer 1

: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.

Answer 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 active
    if ($sub.length && ! $target.hasClass('active')) {
        // show sub
        $target.addClass('active');
        // done
        e.stopPropagation();
        return false;
    }

    // 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/

Answer 3

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
    }
});