Initialization

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

Back to top