Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jupi on Oct 10, 2008 12:42
open dhtmlx forum
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