javascriptjqueryjquery-uijquery-ui-menu

Using jQuery Menu Widget as a Pop-Up Menu

I'm trying to use the jQuery Menu Widget in my Web Forms app.

I threw together a simple demo and it works exactly like the example in the link above.

But I want the menu to be a pop up menu. And when the user clicks somewhere else, the menu should close automatically. Unfortunately, I could find nothing about this at the jQuery UI site.

Can someone point to an examples of use the jQuery Menu Widget as a pop-up menu?

Solution

  • I assume that you want a modal window, not an old-style popup. Why not just give to the menu div a display: none; value in the CSS, and then having a script to make it appear? In Jquery it would be as easy as something like this:

    $("#your_div").fadeIn("slow");

    where your_div is the id of the menu div and "slow" is the speed of the animation. .fadeOut() is the function to call to achieve the opposite (your menu disappears).

    If you want the menu to disappear when the user clicks somewhere else, you might create a transparent div which is as large as the screen and make sure that the .fadeout() function is triggered by clicking on this invisble div.