<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

<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)

<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

<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

<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>

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>

<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>