Object Constructor

var myMenu = new dhtmlXMenuObject(parent, skin);

where

  • parent - id of HTML element which will be used as parent (or object itself)
  • skin - name of skin, optional (string)

    The full list of initialization options is given below.

<div id='my_menu_here' style="width: 500px;"> </div>
<script>
// common init code
var myMenu = new dhtmlXMenuObject("my_menu_here");
</script>

dhtmlxLayout, dhtmlxWindow, dhtmlxAccordion and dhtmlxTabbar can create a menu inside their cells by using the following syntax:

// attach to Layout
myLayout.attachMenu();
myLayout.cells(id).attachMenu();
// attach to Window
myWins.window(id).attachMenu();
// attach to Accordion
myAcc.cells(id).attachMenu();
// attach to Tabbar
myTabbar.cells(id).attachMenu();

Menu can also be initialized by object notation

var myMenu = new dhtmlXMenuObject({
    parent:"a_menu",
    image_path:"codebase/imgs/",
    onClick:function(){
        alert("Menu item was clicked"); 
    }
});

Specifying Initialization Options

  • parent - (string or object), id of container, where tree will be initialized, mandatory
  • image_path - (string), path to image folder, which will be used for icons in tree
  • skin - {string} changes menu skin (setSkin())
  • iconset - {string} sets the Font Awesome icons for menu
  • align - {string} sets top level menu align (setAlign())
  • auto_hide - {boolean} sets to false to prevent hiding a contextual menu by a click (setAutoHideMode())
  • auto_show - {boolean} sets to false to prevent showing a contextual menu by a click (setAutoShowMode())
  • caption - {string} sets top level additional text (in case of usual menubar)(setTopText())
  • context - {boolean} renders menu as contextual (renderAsContextMenu())
  • dynamic - {string} enables dynamic loading of sublevels (enableDynamicLoading())
  • icon_path - {string} defines an url where necessary user embedded icons are located (setIconsPath())
  • open_mode - {string} sets open mode for the menu (setOpenMode())
  • xml - {string}, url of data xml file

Specifying Menu Items

menu items can be defined through items collection

myMenu = new dhtmlXMenuObject({
    parent:"a_menu",
    items:[
        {id:"t1", text:"Top 1", items:[
            {id:"ch1", text:"child 1"},
            {id:"ch2", text:"child 2"}
        ]}
    ]
});

Each item can have next attributes:

  • id - {string} id of menu item
  • text - {string} caption of menu item
  • img - {sting} url of image related to menu item
  • disabled - {boolean} disabled state
  • img_disabled - {sting} url which will be used for item in disabled state
Back to top