Menu Creation

The DHTML Menu 4 is build up of a few different classes. The most important ones are Menu, MenuItem, MenuBar and MenuButton. If you have used XMenu before then the usage of DHTML Menu 4 should be very easy.

Menu

The first step to create a menu system is to first create the menus. This is done by creating an object by calling the constructor Menu. The constructor does not take any arguments but there are a few properties that you might want to change.

var m = new Menu();

To set a properti you can always set it directly on the actual object but in some cases you might want the property to apply to all instances of Menu. In these cases you should set the field on the prototype object. Below are the properties that are shared among all menus.

Menu.prototype.cssFile = "skins/winxp.css";
Menu.prototype.mouseHoverDisabled = true;
Menu.prototype.showTimeout = 250;
Menu.prototype.closeTimeout = 250;

For a list of all fields available for the Menu class see the API page.

MenuItem

The constructor for a MenuItem takes for argument but only the first one is required.

new MenuItem( sLabelText, fAction, sIconSrc, oSubMenu )

The second argument, fAction, should point to a function that is called when the user clicks on the menu item. This argument can also be a String and in that case it is treated as an URI that the browser should navigate to. In case an URI is used the target property can be used to tell the browser in what window or frame the page should be opened in.

function f() {
   alert("f called");
}
var mi1 = new MenuItem("Call f", f);
var mi2 = new MenuItem("Call anon", function () { alert("anon called"); });

var mi3 = new MenuItem("Go to WebFX", "http://webfx.eae.net");
var mi4 = new MenuItem("Google in new window", "http://www.google.com");
mi4.target = "_blank";

To show an icon set the third argument, sIconSrc, to point at an image file located somewher on the internet.

var mi3 = new MenuItem("Go to WebFX", "http://webfx.eae.net",
                       "http://webfx.eae.net/images/favicon.gif");

To make the menu item open up a sub menu you set the fourth argument, oSubMenu, to point to an already created menu. Notice that the submenu object must already exist or else you will get an error.

var subMenu = new Menu();
var mi5 = new MenuItem("Item with sub", null, null, subMenu);

Adding Items

A menu item on its own is not of much use so we have to add the item to a menu. This is done by calling the method add on the menu item. A common procedure is to create the menu item inside the call to add because it is such a common task. In some cases it is also desired to be able to add properties to the menu item and in these cases you can also assign the menu item to a variable inside the call to add.

var m = new Menu();
m.add(new MenuItem("Menu Item 1"));

var tmp;
m.add( tmp = new Menu Item 2", "http://www.yahoo.com") );
tmp.target = "myFrame";

More properties

There are a few other interesting properties for you to set on a menu item.

To show a tooltip when the user hovers the menu item set the tooltip property. This can be any string but HTML code is not handled.

To show some text that descripts the shortcut used to invoke the action set the shortcut property. This is only there for show. It does not set up the keyboard command.

When navigating using the keyboard it is common that a character is treated as a mnemonic. This is the key that the user should press to invoke the menu item when navigating through the menu. This is usually shown by underlining the character.

You can also disable a menu item by setting the disabled property to true.

var copyItem = new MenuItem("Copy", doCopy, "images/copy.png");
copyItem.title = "Copies the selected item to the clipboard";
copyItem.mnemonic = 'c';
copyItem.shortcut = "Ctrl+C";
copyItem.disabled = true;

Notice that if you want to change any property of the menu item at runtime (after the first time shown) you need to invalidate the menu it is placed inside. To do this call invalidate on the menu.

For more properties and methods see the API page.

CheckBoxMenuItem

The class CheckBoxMenuItem represents a menu item that shows a check box instead of an icon. A CheckBoxMenuItem can be in two different states, checked or unchecked. When the user clicks on it the state changes. The state is represented using the property checked.

function onCheckBoxChanged() {
   alert("The menu item with the text " + this.text +
         " is now " + (this.checked ? "checked" : "unchecked"));
}

var cbmi = new CheckBoxMenuItem("Check Me", false, onCheckBoxChanged);

For more properties and methods see the API page.

RadioButtonMenuItem

Another common type of menu items are radio button items. These allow one alternative from a group of items to be selected. Radio button items are represented by the class RadioButtonMenuItem which is another sub class of MenuItem. The radio item shows a radio button instead of the normal icon. To group radio items together the property radioGroupName is used. This is also the third argument that is passed to the constructor. Notice that radio groups cannot span between different menus.

function onRadioChanged() {	
   var text;
   if (rb1.checked)
      text = rb1.text;
   else if (rb2.checked)
      text = rb2.text;
   else if (rb3.checked)
      text = rb3.text;
   alert("You selected " + text);
};

var rb1 = new RadioButtonMenuItem("Vanilla", false, "flavorGroup", onRadioChanged);
var rb2 = new RadioButtonMenuItem("Chocolate", true, "flavorGroup", onRadioChanged);
var rb3 = new RadioButtonMenuItem("Strawberry", false, "flavorGroup", onRadioChanged);

For more properties and methods see the API page.

MenuSeparator

Another type of menu item is the MenuSeparator. This class is used to show a separator on a menu.

var m = new Menu();

m.add( new MenuSeparator() );

Introduction
Menu Creation
Menu Bar Creation
Usage
API
Customizing look & feel
Demos
Download

Author: Erik Arvidsson