Menu Bar Creation

DHTML Menu 4 also has support for creating menu bars. Menu bars contians menu buttons and these menu buttons open menus when clicked. To use the menu bar you should first create your menus. If you don't already know how to work with menus you should check out the Menu Creation page.


A menu bar is a also a menu. The class MenuBar extends Menu. This might seem a bit odd but if you think about it they are really very similar. There are of course things that does not apply to a menu bar, such as opening, closing and positioning it and the methods for handling these have been overridden.

To create a menu bar just create a new instance from the class MenuBar. After this you create your menu buttons and finally insert the menu into your page. The insertion can be done in two ways. You can either draw it into the page while the page is loading or you can create a DOM node that can later be inserted and moved etc.

var mb = new MenuBar();

// create the menu buttons

// write into page

// or create DOM node
var el = mb.create();

For more properties and methods see the API page.


The MenuButton is used to show the buttons on the menu bar. Each menu button is associated with a menu that is opened when the button is clicked.

// fileMenu : Menu
// mb : MenuBar

var menuButton = new MenuButton("File", fileMenu);
menuButton.mnemonic = 'f';

For more properties and methods see the API page.

Menu Creation
Menu Bar Creation
Customizing look & feel

Author: Erik Arvidsson