expand collaps

## dhtmlXMenu Guide and Samples

### Main features

- Multibrowser/Multiplatform support
- Full controll with JavaScript API
- Dynamic loading
- XML support
- customizable design
- horisontal and vertical layout
- high stability
- context menu extension
- direct link menu extension

### Supported browsers

- IE 5.x and above
- Mac OS X Safari
- Mozilla 1.4 and above
- FireFox 0.9 and above
- Opera (Xml loading depends on browser version)

### Working with dhtmlXMenu

#### Initialize object on page

    <div id="menuBox" style="width:600;height:30"></div>
    <script>
    	//horisontal menu
    	menu=new dhtmlXMenuBarObject("menuBox","100%","20","Demo");

    	menu.loadXML("config.xml");
    	menu.showBar();

    	//vertical menu
    	menu=new dhtmlXMenuBarObject("menuBox","100%","20","Demo",1);
    	menu.loadXML("config.xml");
    	menu.showBar();

    	//complete list of arguments for menu constructor
    	menu=new dhtmlXMenuBarObject("menuBox","100%","20","Demo",0,"images/","empty.html");
    	menu.loadXML("config.xml");

    </script>

Parameters passed to the constructor are:
- object to attach menu to (should be loaded before calling constructor)
- width of the menu
- height of the menu
- Menu caption (optional)
- Vertical mode flag (optional)
- Images URL
- Dummy page URL (url of the page to use for iframes src /now they are empty as iframes are used to make menu be positioned under selectboxes in IE/ in menu to make it compatible with https) Additional initialisation methods:
- loadXML(url) - load menu config from xml
- showBar() - show menu

#### Set Event Handlers

    <div id="menuBox" style="width:200;height:200"></div>
    <script>
    	menu=new dhtmlXMenuBarObject("menuBox","100%","20","Demo");
    	...
    	menu.setOnClickHandler(onClick);//set function object to call on menu button select
    	menu.setOnShowHandler(onShow);//set function to call on menu show
    	menu.setOnHideHandler(onHide);//set function to call on menu hide

    	menu.setItemAction(itemId, itemOnClickAction); //set on select action for single button
    </script>

- Selected button ID will be passed to function specified as argument for setOnClickHandler(funcObj)

#### Adding Items with Script

    <script>
    	menu=new dhtmlXMenuBarObject("menuBox","100%","20","Demo");
    	...
    	// dhtmlXMenuItemObject(itemId, itemText, itemWidth, itemSrc, itemCSSClass)
    	menu.addItem(new dhtmlXMenuItemObject('icon21.gif','New button',20,18,0,'new_Id','New tooltip'))

    </script>

- For list of initialisation parametrs see documentation on relative objects

#### Configuring with XML

    <script>
    	menu=new dhtmlXMenuBarObject('menuBox',"100%","100%",0);
    	menu.loadXML("config.xml");
    </script>

    XML Syntax:
    <?xml version='1.0' encoding='iso-8859-1'?>
    <menu name="Demo menu" width="100%" height="20" absolutePosition="auto" menuAlign="left" mode="classic">
    	<MenuItem name="File" src="../sysGfx/iconFile.gif" height="25" width="25" id="menu_file">
    		<MenuItem name="Save" src="../sysGfx/iconSave.gif" height="25" width="25" id="file_save"/>
    		<MenuItem name="Open" src="../sysGfx/iconOpen.gif" height="25" width="25" id="file_open"/>
    		<MenuItem name="Exit" src="../sysGfx/iconExit.gif" height="25" width="25" id="file_exit"/>
    	</MenuItem>
    	<MenuItem name="Help" src="../sysGfx/iconHelp.gif" height="25" width="25" id="menu_help">
    		<MenuItem name="Content" src="" height="25" width="120" id="help_content" />
    		<MenuItem name="About" src="" height="25" width="120" id="help_about" />
    	</MenuItem>
    </menu>

<menu> node is mandatory. It specifies parametrs global to all menu, all optional
Optional parameters for this tag are:
- name - menu caption
- width - menu width
- height - menu height
- mode - menu design. can be "classic" - default windows like menu, "popup" - context menu style, "alfa" "betta" - mixed styles
- disableType - if set to "image", then disabled items change their image, else only CSS changed
- absolutePosition - positioning method of menu, allowed values: "absolute, relative, auto"
- menuAlign - align of items in menu
- globalCss - CSS class for menu items instead of default
- globalSecondCss - CSS class for menu items on child menu panels
- globalTextCss - CSS class for items text instead of default
- type - menu buttons type, can be :"a1","a2","a3","b1","b2","b3" (default a2)
  a1 - image doesn't has own css style, selection over all button, without borders
  a2 - image doesn't has own css style, selection over all button, with borders
  a3 - image has own css style, selection over text only, with borders
  b1 - image has own css style, selection over all button, without borders
  b2 - image has own css style, selection over all button, with borders
  b3 - image has own css style, selection over text only, with borders
- withoutImages - all child menu items can not have images, attribute src will be ignored
- mixedImages - child menu items can have or not have images,based on src attribute
<MenuItem> menu item with image and text
Mandatory parameters for this tag are:
- src - src of image
- id - id of the button
Optional parameters for this tag are:
- width - button width
- height - button height
- disableImage - alternative image src, for disabled state
- tooltip - button tooltip

#### Menu items manipulation

    <script>

    	menu.hideButtons(listOfIds); //hide items, listOfIds - list of comma separated ids
    	menu.showItem(itemId); //show item
    	menu.disableItem(itemId); //disable item

    	or

    	var item=menu.getItem(itemId); //get item object by id
    	item.disable(); //disable

    	item.setImage(newImageUrl); // set new image
    	item.setText(newItemText); // set new  text
    </script>

#### Link navigation menu

    For creation link navigation menu you need not any additional js instriction,
    simple write neccesary links as "href" attribute of xml "MenuItem" tags.
    You also can write "target" attribute, which will be used as a target for link.
    (By default link loaded in current document)

    <script>
    		aMenuBar=new dhtmlXMenuBarObject("menu_zone","100%",22,"Demo menu");
    		aMenuBar.setGfxPath("../codebase/imgs/");
    		aMenuBar.loadXML("_menu3.xml")
    		aMenuBar.showBar();

    </script>

    XML Syntax:
    <?xml version='1.0' encoding='iso-8859-1'?>
    <menu name="Demo menu" width="100%" height="20" absolutePosition="auto" menuAlign="left">
    	<MenuItem name="File" src="../sysGfx/iconFile.gif" height="25" width="25" id="menu_file">
    		<MenuItem name="Save" src="../sysGfx/iconSave.gif" height="25" width="25" id="file_save"  href="save.html"/>
    		<MenuItem name="Open" src="../sysGfx/iconOpen.gif" height="25" width="25" id="file_open" href="open.html"/>
    		<MenuItem name="Exit" src="../sysGfx/iconExit.gif" height="25" width="25" id="file_exit" href="exit.html"/>
    	</MenuItem>
    	<MenuItem name="Help" src="../sysGfx/iconHelp.gif" height="25" width="25" id="menu_help">
    		<MenuItem name="Content" src="" height="25" width="120" id="help_content" href="help.html" target="_blank"/>
    		<MenuItem name="About" src="" height="25" width="120" id="help_about" href="about.html" target="_blank"/>
    	</MenuItem>
    </menu>

#### Context menu

    <script>
    		//init context menu
    		aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
    		aMenu.menu.setGfxPath("../codebase/imgs/");
    		aMenu.menu.loadXML("_context.xml");
    		//menu send two parametrs to handler - menu item id, and context zone id
    		aMenu.setContextMenuHandler(onButtonClick);

    		//set context zones
    		//first parametr - id of html item which need context menu, second - id of context zone
    		aMenu.setContextZone("alfa1",1);

    		aMenu.setContextZone("alfa2",2);
    		aMenu.setContextZone("alfa3",3);
    </script>

© DHTMLX LTD.