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;
		    		    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>