diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 57a3209ce..6bd67b64a 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -23,6 +23,7 @@ }); $(".menubar-icons").menubar({ + autoExpand: true, menuIcon: true, buttons: true, position: { diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 39e75924e..3df6d9a53 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -20,6 +20,7 @@ $.widget( "ui.menubar", { version: "@VERSION", options: { + autoExpand: false, buttons: false, menuIcon: false, position: { @@ -89,7 +90,11 @@ $.widget( "ui.menubar", { that._close(); return; } - if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" ) { + if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" || that.options.autoExpand ) { + if( that.options.autoExpand ) { + clearTimeout( that.timer ); + } + that._open( event, menu ); } }) @@ -115,6 +120,22 @@ $.widget( "ui.menubar", { .attr( "role", "menuitem" ) .attr( "aria-haspopup", "true" ) .wrapInner( "" ); + + if ( that.options.autoExpand ) { + input.bind( "mouseleave.menubar", function( event ) { + that.timer = setTimeout( function() { + that._close(); + }, 150 ); + }); + menu.bind( "mouseleave.menubar", function( event ) { + that.timer = setTimeout( function() { + that._close(); + }, 150 ); + }) + .bind( "mouseenter.menubar", function( event ) { + clearTimeout( that.timer ); + }); + } // TODO review if these options are a good choice, maybe they can be merged if ( that.options.menuIcon ) {