Categories | Question details Back To List | ||
dhtmlXMenuBarObject - hide Hi, Thanks for responding to my DhtmlMenu positioning question. In the same example, i try to display an dhtmlXmenuBar as a popup menu on click of a button. I would like to know is there anyway that i could hide the main popup menu on mouse out event. When i move my mouse out of the popup menu, it should automatically hide in 2 or 3 seconds. Please help me with this. Thank you very much <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Building Menu with script</title> <link rel="STYLESHEET" type="text/css" href="dhtmlxmenu.css"> <script language="JavaScript" src="dhtmlxprotobar.js"></script> <script language="JavaScript" src="dhtmlxmenubar.js"></script> <script language="JavaScript" src="dhtmlxcommon.js"></script> <script> var flag; function onButtonClick(itemId,itemValue) { //do nothing } function showmenu() { if(!flag){ aMenuBar=new dhtmlXMenuBarObject(document.getElementById('alertmenu'),20,20,""); aMenuBar.setOnClickHandler(onButtonClick); aMenuBar.setMenuMode("popup"); aMenuBar.enableWindowOpenMode(false); aMenuBar.disableSmartPositioning(true); //create menu item var item = new dhtmlXMenuItemObject("MainSpan","Span Actions",""); aMenuBar.addItem(aMenuBar,item); //create submenu var subMenu = new dhtmlXMenuBarPanelObject(aMenuBar,item,false,10,true); var item = new dhtmlXMenuItemObject("span1","Span Actions 1"); aMenuBar.addItem(subMenu,item); var item = new dhtmlXMenuItemObject("span2","Span Actions 2",""); aMenuBar.addItem(subMenu,item); //create menu item var item = new dhtmlXMenuItemObject("MainNote","Notifications",""); aMenuBar.addItem(aMenuBar,item); //create submenu var subMenu = new dhtmlXMenuBarPanelObject(aMenuBar,item,false,10,true); var item = new dhtmlXMenuItemObject("note1","Notifications 1",""); aMenuBar.addItem(subMenu,item); var item = new dhtmlXMenuItemObject("note2","Notifications 2",""); aMenuBar.addItem(subMenu,item); //create menu item var item = new dhtmlXMenuItemObject("MainCustom","Custom Actions",""); aMenuBar.addItem(aMenuBar,item); //create submenu var subMenu = new dhtmlXMenuBarPanelObject(aMenuBar,item,false,10,true); var item = new dhtmlXMenuItemObject("custom1","Custom Actions 1",""); aMenuBar.addItem(subMenu,item); var item = new dhtmlXMenuItemObject("custom2","Custom Actions 2",""); aMenuBar.addItem(subMenu,item); var item = new dhtmlXMenuItemObject("custom3","Custom Actions 3",""); aMenuBar.addItem(subMenu,item); aMenuBar.showBar(); flag = true; } else{ } } </script> </head> <body> <input type="button" onclick="javascript:showmenu();" id="toolbarbutton" value ="DISPLAY REGULAR MENU" name="toolbarbutton" > <div id="alertmenu" style="position:absolute;z-index:1;display:inline;top:30px;left:10px;"></div> </div> <br> <table border><tr><td>ROW 1</td></tr><tr><td>ROW 2</td></tr><tr><td>ROW 3</td></tr><tr><td>ROW 4</td></tr></table> </body> </html> Answer posted by Support on Oct 13, 2008 03:27 Menu doesn't support such functionality. You can try to add some kind of event for menu container , similar to next dhtmlxEvent(aMenuBar.topNod,_isIE?"mouseleave":"mouseout",function(){ //some timeout based magic here ... aMenuBar.hideBar(); }); By the way, new version of dhtmlxMenu was just released - it still not support such behavior, but may suit better for your needs |