All components dhtmlxMenu Init on page Adding first item

Adding first item
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Adding first item</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myMenu, myMenu2;
		function doOnLoad() {

			myMenu = new dhtmlXMenuObject("menuObj");
			myMenu.setIconsPath("../common/imgs/");

			myMenu.addNewSibling(null, "opts", "Options"); // first item for top level via Sibling, important: parentId=null
			myMenu.addNewSibling("opts", "color", "Color");
			myMenu.addNewSibling("color", "help", "Help", false);
			myMenu.addCheckbox("child", "opts", 0, "ignore_case", "Ignore Case", true);
			myMenu.addCheckbox("child", "opts", 1, "search_everywhere", "Search Everywhere");
			myMenu.addRadioButton("child", "color", 0, "red", "Red", "color", true);
			myMenu.addRadioButton("child", "color", 1, "green", "Green", "color");
			myMenu.addRadioButton("child", "color", 2, "blue", "Blue", "color");
			myMenu.addNewChild("help", 0, "about", "About...", false, "about.gif");
			myMenu.addNewChild("help", 1, "help2", "Help", false, "help.gif");
			myMenu.addNewChild("help", 2, "bugrep", "Bug Reporting", false, "bug_reporting.gif");


			myMenu2 = new dhtmlXMenuObject("menuObj2");
			myMenu2.setIconsPath("../common/imgs2/");

			myMenu2.addNewChild(null, 0, "buddy", "Buddy List"); // first item for top level via Child, important: parentId=null
			myMenu2.addNewChild(null, 1, "status", "Status");
			myMenu2.addNewChild(null, 2, "tools", "Tools");
			myMenu2.addCheckbox("child", "buddy", 0, "show_off_line", "Show Off-Line Buddies", true);
			myMenu2.addCheckbox("child", "buddy", 1, "buddy_groups", "Buddy Groups", true);
			myMenu2.addCheckbox("child", "buddy", 2, "protocol_icon", "Show Protocol Icons");
			myMenu2.addRadioButton("child", "status", 0, "offline", "Off-Line", "status");
			myMenu2.addNewSeparator("offline");
			myMenu2.addRadioButton("child", "status", 2, "online", "On-Line", "status", true);
			myMenu2.addRadioButton("child", "status", 3, "away", "Away", "status");
			myMenu2.addRadioButton("child", "status", 4, "notavailable", "Not Available", "status");
			myMenu2.addRadioButton("child", "status", 5, "invisible", "Invisible", "status");
			myMenu2.addNewChild("tools", 0, "manage_accounts", "Manage Accounts", false, "private_data.gif");
			myMenu2.addNewChild("tools", 1, "modules", "Modules", false, "addons.gif");
			myMenu2.addNewChild("tools", 2, "files_transfer", "Files Transfer", false, "../imgs/cut.gif");
		}
	</script>

</head>
<body onload="doOnLoad();">
	<table cellspacing="0" cellpadding="0" border="0">
		<tr>
			<td width="300"><div style="height: 250px; margin-right:20px;"><div id="menuObj"></div></div></td>
			<td width="300"><div style="height: 250px;"><div id="menuObj2"></div></div></td>
		</tr>
	</table>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.