Using jQuery Menu Widget as a Pop-Up Menu

Question

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?

Answer 1

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.

Answer 2

We assembled a jQuery UI button and menu widgets to give us a drop-down menu, see this fiddle for a demo and the full code.

For the HTML you need a button and a nested list, such as:

<button>Please choose...</button>

<ul class="accounts">
    <li> <a href="#">Bank</a>

        <ul>
            <li><a href="#">Lloyds</a>
            </li>
            <li><a href="#">Barclays</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Cash</a>
    </li>
</ul>

The CoffeeScript sets up a menu (hidden initially) and the button to toggle the menu:

select_account_button = $('button')
accounts_menu = $('.accounts')

# turn the button into a dropdown that shows/hides the menu
select_account_button.button
  icons:
    secondary: "ui-icon-triangle-1-s"
.click ->
  accounts_menu.show().position(
    my: "left top"
    at: "left bottom"
    of: this
  )
  $(document).one "click", ->
    accounts_menu.hide()
  false

# set up the menu (hidden initially)
accounts_menu.hide()
.menu
  select: (event, ui) ->
    console.log "selected"