Initialization

To add dhtmlxMenu into an application, you need to take the following simple steps:

Download the Menu package and unpack it into a folder of your project
Include source files
Create a container
Initialize Menu with the object constructor
Load data into Menu

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxMenu</title>         
        <script type="text/javascript" src="../../codebase/menu.js"></script>
        <link rel="stylesheet" href="../../codebase/menu.css">
    </head>
    <body>
        <div id="menu_container"></div>
        <script>            // creating dhtmlxMenu
            var menu = new dhx.Menu("menu_container");
        </script>
    </body>
</html>

Include source files

Create an HTML file and place full paths to CSS and JS files of dhtmlxMenu into the header of the created HTML file. The files are:

menu.js
menu.css

<script type="text/javascript" src="../../codebase/menu.js"></script>
<link rel="stylesheet" href="../../codebase/menu.css">

Create a container

Add a container for the Menu and give it an id, e.g. "menu_container":

<div id="menu_container"></div>

Initialize Menu

Initialize Menu with the dhx.Menu object constructor. The constructor takes two parameters:

the HTML object on the page that serves as the Menu container
an object with configuration properties. If this argument is not passed to the constructor, the settings will be default

var menu = new dhx.Menu("menu_container");

Configuration properties

css - (string) the name(s) of CSS class(es) used for Menu
navigationType - (string) sets the action that opens menu:
- "pointer" - the menu is opened when a user hovers the mouse pointer over it
- "click" - the menu is opened when a user clicks on it (used for mobile devices)

var menu = new dhx.Menu("menu", {navigationType:"click"});

Load data into Menu

There are two handy ways of loading data, i.e. a set of controls into Menu:

from an external file with the help of the load() method of tree collection:

var menu = new dhx.Menu("menu_container");
menu.data.load("../common/dataset.json");

from a local source using the parse() method of tree collection:

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

Detailed information on loading data into Menu is given in the article Data Loading.