The XMenu system is a Object Oriented JavaScript system and all menus are created using JS. 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

Due to the limitations of one of the targeted browsers we cannot get the size of an element and therefore all sizes and positions must be reflected in the JS code. This is probably one of the worst limitation of the menu system but it is just something that we have to live with in its current state.

The default position of a root menu is 0,0 but by setting the left and top property on the menu object you can change this. The position of sub menus will however be calculated from the position and size of the parent menu and the height of a menu item so you only needs to set the position for the root menu. The width of a menu is by default set to 100 but it can be changed using the width property.

myMenu.left  = 30;   = 10;
myMenu.width = 200;

Showing a Menu

To show a menu you call show() on a menu object. This shows the menu as well as all of its parent menus.

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 a long 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 disapear as soon as the user clicks anywhere else.


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