Example « Documentation

Note: The example here is very simple to get you started. For more advanced ones, view the Demo page.

Example for jsDOMenu Version 1.3

Suppose you wish to make a two-level pop-up menu. Open jsdomenu.inc.js. You should see the following:

function createjsDOMenu() {
	
}

We define a main menu, and called it mainMenu:

mainMenu = new jsDOMenu(120);

Next, we add in some menu items and separators:

with (mainMenu) {
  addMenuItem(new menuItem("Item 1", "", "example.htm"));
  addMenuItem(new menuItem("Item 2", "item2", "example.htm"));
  addMenuItem(new menuItem("-"));
  addMenuItem(new menuItem("Item 3", "", "example.htm"));
  addMenuItem(new menuItem("Item 4", "", "example.htm"));
}

We assign a name "item2" to the second menu item for later use.

Similarly, we define a submenu called subMenu, and add in some menu items and separators too:

subMenu = new jsDOMenu(140);
with (subMenu) {
  addMenuItem(new menuItem("Item 1", "", "example.htm"));
  addMenuItem(new menuItem("-"));
  addMenuItem(new menuItem("Item 2", "", "example.htm"));
  addMenuItem(new menuItem("-"));
  addMenuItem(new menuItem("Item 3", "", "example.htm"));
  addMenuItem(new menuItem("Item 4", "", "example.htm"));
}

We want the submenu to show up when the cursor is over the second menu item of the main menu. We make use of the setSubMenu() method:

mainMenu.items.item2.setSubMenu(subMenu);

Next, set the pop-up menu to be the main menu:

setPopUpMenu(mainMenu);

Finally, we define how the pop-up menu should show/hide. Suppose we want it to show/hide by left click:

activatePopUpMenuBy(0, 0);

View the example demo based on the above codes.

Back to Documentation

Compiled on 16 January 2005.

The latest version is available at http://www.tohzhiqiang.per.sg/projects/jsdomenu/docs/example.php.