Files to Include

To use the DHTML Menu 4 system you first need to include a few different files. There are three JavaScript files and one CSS file that needs to be included.

<script type="text/javascript" src="js/poslib.js"></script>
<script type="text/javascript" src="js/scrollbutton.js"></script>
<script type="text/javascript" src="js/menu4.js"></script>

If you plan to use a menu bar you also need to include the CSS file.The file to include depends on the look and feel you want for the menu bar. Below is the code needed to include the CSS file that describes a menu bar that looks like a Windows Classic menu bar.

<link type="text/css" rel="StyleSheet" href="skins/winclassic.css" />

Create your menus

If you haven't already read the Menu Creation and Menu Bar Creation pages you should read these first.

Below is the code for a complete simple menu system.

First we set the default css file to use for all menus.

// set default css file to use
Menu.prototype.cssFile = "skins/winclassic.css";

Then we start with a simple menu with a few menu items using both URIs and functions for the actions

var testMenu = new Menu();

testMenu.add(tmp = new MenuItem("New Window", document.location.href)); = "_blank";
tmp.mnemonic = 'n';
tmp.shortcut = "Ctrl+N";

testMenu.add(tmp = new MenuItem("WebFX Home", "", ""));
tmp.mnemonic = 'w';

testMenu.add(tmp = new MenuItem("Alert", function () { alert("Clicked " + this.text); }) );
tmp.mnemonic = 'a';

testMenu.add(new MenuSeparator);

testMenu.add(tmp = new MenuItem("Close", function () { window.close(); }) );
tmp.mnemonic = 'c';

After this we reuse the check box menu from earlier...

// Check box menu

var cbm = new Menu();

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

cbm.add( new CheckBoxMenuItem("Check Me 1", false, onCheckBoxChanged) );
cbm.add( new CheckBoxMenuItem("Check Me 2", false, onCheckBoxChanged) );

...and the radio button menu.

// Radio Menu

var rm = new Menu();

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);

After this we create a menu with a few sub menus. First we create one manually and after that we use a loop to create some menus.

// sub menus

var sm = new Menu();

// manual
var sm2 = new Menu();
sm.add( tmp = new MenuItem( "Item with sub", null, null, sm2) );
sm2.add( new MenuItem("Item inside sub menu") );

sm.add( new MenuSeparator() );

// loop
for (var i = 0; i < 5; i++) {
   tmp = new Menu;
   sm.add( new MenuItem("Sub Menu " + i, null, null, tmp) );
   for (var j = 0; j < 5; j++) {
      tmp2 = new Menu();
      tmp.add( new MenuItem("Item " + i + "." + j, null, null, tmp2) );
      for (var k = 0; k < 5; k++) {
         tmp2.add( new MenuItem("Item " + i + "." + j + "." + k) );

Then we create the menu bar and buttons that opens up the menus.

// menu bar

var menuBar = new MenuBar();

var testButton = new MenuButton("Test", testMenu);
testButton.mnemonic = "t";

menuBar.add( tmp = new MenuButton("Check Box Menu", cbm) );
tmp.mnemonic = 'c';

menuBar.add( tmp = new MenuButton("Radio Menu", rm) );
tmp.mnemonic = 'r';

menuBar.add( tmp = new MenuButton("Sub Menus", sm) );
tmp.mnemonic = 's';

And finally we use the write method to create the menu bar.


This menu can be seen in action in the file simpledemo.html

Menu Creation
Menu Bar Creation
Customizing look & feel

Author: Erik Arvidsson