The XMenu system is an Object Oriented JavaScript system and all menus are created using JS constructors. The only HTML you need for a menu is the script tags that enclose the js.

Creating a Menu

All menus needs to be created during the load phase of the page. A menu is created by creating a WebFXMenu and then adding WebFXMenuItems and WebFXMenuSeparators to it. Once all objects have been created the menus needs to be generated. This is done using document.write. This will write the entire menu tree so if you have more than one menu tree you will need to do more than one write.

var myMenu = new WebFXMenu;
myMenu.add(new WebFXMenuItem("Menu Item 1", "", "Tool tip to show"));
myMenu.add(new WebFXMenuSeparator());
myMenu.add(new WebFXMenuItem("Menu Item 2", "", "Tool tip to show"));


Sub Menus

To create a sub menu you just create another menu and then in the creation of the menu item you should pass along that menu as the fourth argument.

var mySubMenu = new WebFXMenu;
mySubMenu.add(new WebFXMenuItem("Menu Item 3", "", "Tool tip to show"));

myMenu.add(new WebFXMenuItem("Menu Item 4 with sub menu", null, "Tool tip to show", mySubMenu));

Positioning and Sizing

Positioning is now done automatically but the posibility to set the position is still there. See the API for the right properties. The width however still needs to be set in the JavaScript. The default width is 100 but can be changed by setting th width property of the menu.

myMenu.width = 200;

Creating a menu bar

The menu bar is basically just a menu with a slightly different layout. The WebFXMenuBar extends the menu and it overrides the toString method. Menu buttons are extending menu items and are called WebFXMenuButton.

var myBar = new WebFXMenuBar;
myBar.add(new WebFXMenuButton("Menu Button 1", "", "Tool tip to show"));
myBar.add(new WebFXMenuButton("Menu Button 2", null, "Tool tip to show", myMenu));

The menu buttons can have a drop down menu by passing along a menu as the fourth argument (just like for the menu items). Drop down menus are shown when the anchor becomes focused and hidden when the anchor is blurred. This makes the menu disappear as soon as the user clicks anywhere else. If useHoverMode is set to true the menus will be shown when you hover a menu button.


The menu system consists of a few object types, WebFXMenu, WebFXMenuItem and WebFXMenuSeparator. All of these return the string needed to generate the HTML when one calls toString(). This method is the one JS uses whenever a string is needed for an object. This means that the following will create the needed HTML:


Introduction & Browser Issues
Look & Feel
Hover Menu

Author: Erik Arvidsson