I'm trying to figure out how to make a pop-up menu using the jQuery UI menu widget.

After searching around, I finally found the following demo that does what I want:

.html

However, I am having a little trouble understanding this demo. For example:

1. What is making the menu hidden before any of the buttons are clicked?
2. What is causing the menu to close when it's open and I click somewhere else on the page?

Any help appreciated.

I'm trying to figure out how to make a pop-up menu using the jQuery UI menu widget.

After searching around, I finally found the following demo that does what I want:

http://view.jqueryui./menubar/demos/popup/popup-menu.html

However, I am having a little trouble understanding this demo. For example:

1. What is making the menu hidden before any of the buttons are clicked?
2. What is causing the menu to close when it's open and I click somewhere else on the page?

Any help appreciated.

• javascript
• jquery
• jquery-ui
• jquery-ui-menu

Share Improve this question Follow asked Dec 4, 2012 at 4:25 Jonathan WoodJonathan Wood 67.5k8282 gold badges304304 silver badges532532 bronze badges 5

• What is making the menu hidden Well, of course it is the jQuery UI making it hidden. – Derek 朕會功夫 Commented Dec 4, 2012 at 4:31
• Was this intended to be helpful? Which jQuery UI function hides it and where does it get called? – Jonathan Wood Commented Dec 4, 2012 at 4:35
• Line 25: $("#button1").button().next().menu(... It makes #button1 a button, and make the next element the menu. – Derek 朕會功夫 Commented Dec 4, 2012 at 4:42
• I can see it makes the button a trigger and the list the menu. But I don't see how that's related to what I asked. – Jonathan Wood Commented Dec 4, 2012 at 4:54
• When you call .menu(), it triggers many things including hiding the menu and adding listeners, for example, it applies class names to the target element line [email protected] ...addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) – Derek 朕會功夫 Commented Dec 4, 2012 at 5:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

That demo uses a modified version of jquery.ui.menu.js along with the popup widget: http://view.jqueryui./menubar/ui/jquery.ui.popup.js

Menu itself, as released in 1.9, doesn't have any code for showing it as a popup. I remend writing some custom code to build a popup menu, until a stable release offers a proper solution.

The jQuery UI Popup - Popup Menu you referenced uses unreleased code as Jörn Zaefferer said. (Notice that Jörn is the same guy that closed the bug)

But there is an almost identical-looking solution in jQuery UI Button's Split Button example that doesn't use .popup() and does all the hiding etc. explicitly.

Perhaps you could use that as a starting point instead. I know I'm going to! ;-)

I believe this may be what you're looking for. When you call .menu(), lots of things are triggered in the _create() function (as Derek said), like setting class names etc. Then, at lines 123-135 in jquery.ui.menu.js, this happens:

    this.refresh();

    // Clicks outside of a menu collapse any open menus
    this._on( this.document, {
        click: function( event ) {
            if ( !$( event.target ).closest( ".ui-menu" ).length ) {
                this.collapseAll( event );
            }

            // Reset the mouseHandled flag
            mouseHandled = false;
        }
    });

The second part makes sure all menus are collapsed when the user clicks on the page (this.document) outside a menu (.ui-menu): this.collapseAll() is called, which calls this._close(), which in turn calls hide(). This should answer your second question.

As for your first question, The first thing the refresh() function does is:

    // Initialize nested menus
    var menus,
        icon = this.options.icons.submenu,
        submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
            .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
            .hide()
            .attr({
                role: this.options.role,
                "aria-hidden": "true",
                "aria-expanded": "false"
            });

This finds all submenus not previously initialized (in this case all of them since we're ing from _create()) and initializes them, which includes hiding them.