Using jqueryUI’s blur and focus to hide on mouseout

As you probably already know, jquery UI triggers an focus and blur event for each element of the menu so it’s a bit tricky to hide the hole menu for example when the mouse hovers out. Still there’s a workaround:

                        $('.menu_dropdown').click(function() {
		    	    var self = this;
		    	    var test_timer = null;
	    		    $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).menu('destroy'); $(this).css('display',''); $.removeData(this,'uiMenu'); },
		    		    blur: function(event, ui) {  test_timer = setInterval(function() { $(self).next('ul').menu('destroy'); $(self).next('ul').css('display',''); $.removeData($(self).next('ul'),'uiMenu'); clearInterval(test_timer); }, 500); },
		    		    focus: function(event, ui) { clearInterval(test_timer); }
		    		});
	    	   });

or you can use the hiding method presented here.

New jquery UI destroy menu not quite working

Well jquery 1.9 is here and so is the version 1.10 of the popular jquery UI. It has some nice additions like menus, tooltips, menu bars and so on. However the menu seems a little bit tricky to use when using an element to trigger it.

let’s have this example:

      some actions
      

ok now the style:

   .themenu { display: none }

and finally the javascript:

                    $('.menu-expander').click(function() {
		    	    var self = this;
	    		    $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).menu('destroy'); $(this).css('display',''); $.removeData(this,'uiMenu'); },
		    		    blur: function() {}
		    		});
	    	   });

Calling the destroy will leave the menu object intact in the element’s data array under the name “uiMenu”. So destroying it takes the 3 steps shown in select method above.
You could also just hide it on select using this:

     $('.menu-expander').click(function() {
		    	    var self = this;
                            var mn = $(this).next('ul');
                            if(mn.data('uiMenu') != null) mn.show();
                            else 
	    		        $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).hide(); },
		    		    blur: function() {}
		    	        });
	    	   });