To add dhtmlxMenu into an application, you need to take the following simple steps:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxMenu</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
</head>
<body>
<div id="menu_container"></div>
<script> // creating dhtmlxMenu
var menu = new dhx.Menu("menu_container");
</script>
</body>
</html>
Related sample: Menu. Basic Menu Initialization
Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for the Menu and give it an id, e.g. "menu_container":
<div id="menu_container"></div>
Initialize Menu with the dhx.Menu
object constructor. The constructor takes two parameters:
var menu = new dhx.Menu("menu_container");
css | the name(s) of CSS class(es) used for Menu |
data | specifies an array of data objects to set into Menu |
menuCss | adds style classes to all containers of Menu controls with nested items |
navigationType | sets the action that opens menu |
There are two handy ways of loading data, i.e. a set of controls into Menu:
var menu = new dhx.Menu("menu_container");
menu.data.load("../common/dataset.json");
var data = [
{
value: "File",
items: [
{
value: "New File",
},
{
value: "New window",
},
{
value: "Open File",
},
{
value: "Save File",
}
]
},
{
value: "Edit",
items: [
{
value: "Undo"
},
{
value: "Redo"
},
{
value: "Cut"
},
{
value: "Copy"
}
]
}
];
var menu = new dhx.Menu("menu_container");
menu.data.parse(data);
Related sample: Menu. Basic Menu Initialization
Detailed information on loading data into Menu is given in the article Data Loading.
Back to top