Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Jupi on Oct 09, 2008 09:24
open dhtmlx forum
DHTML Menu Positioning

Hi i have a sample html file which creates a DHTML menu on clicking a button. I have the following questions on this.

1) I want to display the DHTML popup menu ontop of the table rather than moving the table down. What property should be set. I tried putting z-index to 1 in the div element, but not working

2) Also the submenus float if i mention the div element positon to be relative. In my actual application i need to give it as relative in order for the proper position of popup menu.

Please help me to fix these

=========================================================================
<!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);

            //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:relative;z-index:1;display:inline"></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 10, 2008 05:34
There is separate object for context menu creation 
       dhtmlXContextMenuObject
       http://dhtmlx.com/docs/products/dhtmlxMenu/samples/context_menu/context_bulding_script.html?un=1223643119000
which can be used in your case
Technically you can use common menu object as well, but you need to make it absolutly positioned in necessary place by your own styles ( applied to menu's container )

>>2) Also the submenus float if i mention 
If submenus can't position self correctly, you can try to add next line to the menu's init
        menu.disableSmartPositioning(true);