Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

Question

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

When visiting a website, you may notice menus that display sub-menus when hovered over. These menus and sub-menus are created using div elements, with the sub-menus hidden initially using style.display = none;

The issue arises when a sub-menu is opened and does not hide even when the user moves their mouse away from it. It remains open regardless of where the user clicks on the page.

I am seeking advice on how to implement functionality that will automatically hide the sub-menu after a certain amount of time or when the user clicks elsewhere on the page.

Please note: The mouseout event is not functioning as expected in this scenario.

javascript jquery json html css

Answer 1

Answer №1

To achieve the functionality of automatically disappearing after a certain time period, you can utilize the setTimeout method.

var cancelled;

$("mymenu").on("focusout", function() {
    canceled = false;
    setTimeout(function() {
        if (!cancelled) {
            // Hide the menu
        }
    }, 2000);
});

$("mymenu").on("focusout", function() {
    canceled = true;
});

If you want the menu to disappear when clicking on the rest of the page, you should attach a click event listener directly to the document root:

$(document).on("click", function() {
    // Hide the menu if it is visible
});

Answer 2

To achieve the functionality of automatically disappearing after a certain time period, you can utilize the setTimeout method.

var cancelled;

$("mymenu").on("focusout", function() {
    canceled = false;
    setTimeout(function() {
        if (!cancelled) {
            // Hide the menu
        }
    }, 2000);
});

$("mymenu").on("focusout", function() {
    canceled = true;
});

If you want the menu to disappear when clicking on the rest of the page, you should attach a click event listener directly to the document root:

$(document).on("click", function() {
    // Hide the menu if it is visible
});

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

Answer №1

Similar questions

Refresh the browser tab's content

Tips for sending parameters to XSLT using a Javascript function

Can you explain the significance of this code snippet 'true <=> false'?

What is the process by which Elastic Beanstalk executes Node.js application code?

Improving Zen Coding to integrate with JavaScript files on Sublime Text2

What is the best way to position text below an image icon in a menu?

Comparing the benefits of a 3-column flow layout to a traditional

JavaScript for Detecting Hits

Ways to update a value in a table by comparing two JSON objects

Bizarre Incident Management

Complete the form submission process and retrieve data programmatically through the integration of HTML, JQuery,

Oops! An error occurred in AngularJs: "TypeError: $scope.todos.push is not a

Customizing the font style on a CSS changing table

Exploring the internet using a specific font style and ensuring a

I am experiencing an issue where the Laravel URL is not being passed to the controller

The Bootstrap nav bar toggle feature is failing to toggle

Rearrange div elements following an ajax request based on a data attribute and applying the .animate method

Tips for utilizing JSON and ajax smoothly without encountering any errors

`vuetify sidebar with a nested menu``

On mobile devices, the alignment of text in Bootstrap doesn't appear as intended