3

I'm playing around with the Jquery-ui menu widget and I'm trying to get some functionality that seems like it should be REALLY obvious... but I might be overlooking it, or maybe they did when they wrote it.

I was able to get the menu horizontal easily enough, and make the submenu come down vertically... but, for the life of me, I can't get the submenu to collapse when I mouseout of the menu. It just stays there until I click something else. REALLY annoying. As a designer, it goes against all of my sensibilities and I can't see a reason for it to do just hang there.

Did I break the thing, or do I need to add something special? As a side note, I've been fiddling with the Jquery-ui js for a couple hours, editing the menu widget. I tinkered around here:

// DEFAULT FUNCTION:
    // 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
            this.mouseHandled = false;
        },
        // I ADDED THIS:
        mouseout: function( event ) {
            this.collapseAll( event );
        }
    });

It produced the behavior I was going for... sort of... Now I have spotty mouse enter detection for my menu item with the submenu attached. Not really ok with putting a live site up where the menu only works some of the time. Any ideas? Am I doing this the hard way or the wrong way, or is there something I simply don't know about? I'm not the greatest with jQuery, just started in fact.

I'm using a setup that is basically an augmented version of the example on the jQuery UI demo page of the menu widget, so I don't think it's my html that's causing the problem.

FEERspreads
  • 71
  • 1
  • 9

4 Answers4

1

I just had the same problem and find the solution here. I hope it works with you.

jplfl
  • 82
  • 11
  • I'm using the single-file jquery-ui.js rather than all of the widgets as separate files. I'm having trouble finding where to change the code... or even if I can (i.e. this was applicable before some update). Am I missing something? – FEERspreads Jul 20 '13 at 17:40
1

Ok, this just took some searching.

I used jplfl's example in the previous answer as a guide and went into the jquery-ui.js file, searching for any functions that had to do with the menu. I found line # 9715 where mouseleave was bound to "collapseAll" instead of calling a function which actually collapsed the menu. I changed it to this:

    mouseleave: function( event ){
        this.collapseAll( event, true );
    },

And now it works.

So, Yeah. jplfl's answer was definitely helpful, but I thought this might be pertinent as it goes into a little more detail.

FEERspreads
  • 71
  • 1
  • 9
0

Aaron: Just search for 'ui.menu' and scroll down till you see mouseleave: "collapseAll" line, for me it is 11507 (jquery-ui-1.10.3)

4308
  • 796
  • 3
  • 14
  • 26
0

I'm not sure if this will work:

$(document).ready(function() {
$(“#menu”).menu({
mouseleave: function( event ){ this.collapseAll( event, true ); }
});

But I'm sure there is another option. You may check this link:

necromuncher
  • 1