Hide the menu when tapping outside on a tablet device

Question

Hide the menu when tapping outside on a tablet device

Currently working with HTML, CSS, and JS (specifically Angular)

I have a Header menu that contains dropdown sub-menus and sub-sub-menus in desktop view.
On a PC, the sub-menus appear on hover and clicking on an entry redirects you somewhere.
- Clicking on the main entry leads to a different location - serving as both a link and the trigger for the dropdown menu upon hover.
Not every root element has a sub-menu.
There is a separate mobile menu created using media queries for width. However, Tablets in landscape mode display the desktop style, causing some issues.

When testing on tablets (Safari iOS and Chrome for iPad) interesting behavior is observed...

If an element does not have a dropdown, tapping on it directs you to the link.
If an element has a dropdown sub-menu,
- The first tap activates the hover effect without triggering the link but reveals the menu.
- A second tap activates the link.

Quite intriguing!

The problem arises when the menus do not disappear upon tapping off them.

Tapping anywhere on the page itself has no effect (no click-event is raised).
Tapping on another clickable element clears the menu while triggering the link associated with that element.

Initially, I thought of adding a transparent layer across the page under the menu to bind a click event for clearing the menu. However, I faced difficulties making both the transparent layer and underlying page clickable simultaneously. Check out the challenges encountered here.

Even setting the click event on the body to trigger a bubble up did not work as expected (click event didn't fire.)

Experimented with ngTouch which triggered click events everywhere but disrupted the behavior of opening sub-menus - all links started activating immediately, hindering access to the sub-menus.

Any insights or suggestions would be greatly appreciated! Help needed!

javascript angularjs drop-down-menu hover click

Answer 1

Answer №1

To ensure that the dropdown menu is hidden when a click occurs outside of it, you can use the following code snippet:

$('html').click(function (e) {
    if (e.target.id != 'yourDropdown') {
        $('#yourDropdown').hide();
    }
});

Answer 2

To ensure that the dropdown menu is hidden when a click occurs outside of it, you can use the following code snippet:

$('html').click(function (e) {
    if (e.target.id != 'yourDropdown') {
        $('#yourDropdown').hide();
    }
});

Answer 3

Answer №2

Instead of depending on 'mobile browser magic', I prefer to implement it manually. While I don't have experience with Angular, in jQuery the code would likely resemble 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'); 
});

For a demonstration, you can check out this quick example: http://jsfiddle.net/b0aqr1wc/

Answer 4

Instead of depending on 'mobile browser magic', I prefer to implement it manually. While I don't have experience with Angular, in jQuery the code would likely resemble 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'); 
});

For a demonstration, you can check out this quick example: http://jsfiddle.net/b0aqr1wc/

Answer 5

Answer №3

:Sigh: Earlier today, a coworker shared with me a clever solution to this problem that worked like magic:

Implement the "cover sheet" technique, where the sheet collapses simultaneously with the menu.

Although you may lose the ability to interact with the background page for just one tap, the user will clearly see the menu collapsing and be prompted to give it another try.

Answer 6

:Sigh: Earlier today, a coworker shared with me a clever solution to this problem that worked like magic:

Implement the "cover sheet" technique, where the sheet collapses simultaneously with the menu.

Although you may lose the ability to interact with the background page for just one tap, the user will clearly see the menu collapsing and be prompted to give it another try.

Hide the menu when tapping outside on a tablet device

Answer №1

Answer №2

Answer №3

Similar questions

Steps to insert a personalized attribute into a TypeScript interface

The D3.extent() function is raising a TypeError because it is unable to iterate over the

Using Node.js to update information within Firebase

What is the best way to bring a JavaScript file from the source file into an index.html document

JavaScript: End the program upon clicking CANCEL

Configuring a timeout for your Next.JS API can help optimize the performance

AngularJS failing to execute Ajax request

Move the image inside the box without directly following the mouse cursor, but at a slightly faster pace

How can I retrieve all element attributes in TypeScript using Protractor?

"Encountering Issues with Angular's Modules and EntryComponents during Lazy Loading

Configuring webpack for live reloading and Hot Module Replacement on static pages

Chrome extension: some APIs disappear after chrome.runtime.reload() is called

Retrieving data from a dynamic form using jQuery

Utilize jQuery to showcase elements in a dropdown menu

Updating the `link` function to target a specific DOM element within an Angular 2 component

Incorporating JSTree Into Your Website's Heading: A Step-By-Step

Tips for maintaining space beneath an image when text wraps around it

Error message in TypeScript: A dynamic property name must be a valid type such as 'string', 'number', 'symbol', or 'any'

How to access v-model from a separate component in Vue.js

Extending a universal design concept to a new theme within the MUI (Material UI) framework