Download "Menu for applications" script

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the script from this Zip file.

Files in package:

demos/* = Demos of the script.
js/menu-for-applications.js = Main JS file for this script
images_dhtmlsuite/* = Images used by the script
css_dhtmlsuite/* = CSS for the script

Documentation

Please see the complete Class documentation and take a look at the descriptions given in the demos.

Brief description of the classes

menuBar = The main class for this script. It creates the menu bar and contains methods for working on the menu(Examples: the appendMenuItems and deleteMenuItems methods).
menuItem = It creates the layout for a single menu item and have methods for operating on this item. You don't have to work on this menu it
menuModel = The data source("Model") for the menu. It contains an array of menuModelItem objects and saves the relationships between these items.
menuModelItem = Data source for a single menu item.

Note! All methods starting with two underscores(__) are considered to be private methods.

Example of use:

var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.init();

var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuDiv');
menuBar.init();

The first three lines creates the data source for the menu. First a menuModel object is created, then we add items to this menuModel by pointing it to an unordered list on the page(<UL id="menuModel"> - see demo 2). Finally, we call the init method. The init() method will call some private methods in order to set some properties for the menu items(depth, hasSubs etc.).

The next thing we do is to create the menuBar object. We add items to the menuBar object by passing the menuModel to the addMenuItems method. We specify that we want the menu to be inserted into the element with id "menuDiv"(example: <DIV id="menuDiv">). Finally, we call the init method which creates the menu for us.

Look at the description in the demos for more examples on how to build a menu bar