Instructions for Expandable/Collapsible Menu System [ECMS]

1. Loading the javascript files
2. Creating a menu
   1. Creating a new menu
   2. Defining an item
   3. Adding items to folders
   4. An example menu
3. Customising the menu
4. Using multiple menus
5. Controlling the menu
6. Troubleshooting

Creating a new menu

Creating a menu is easy - make a copy of ecms_config.js and start editing. Any text editor will do. The file does not have to be called ecms_config.js, and it does not necessarily need to be in the same directory as the system files.

The top of this file is for customisation settings, scroll down until you see BUILD THE MENU. A sample menu is provided which can be modified.

Defining a folder/item

Use this function to add an item (folder, or child item) to the menu:
ECMS_add_item(level, name, url, target, expanded); where:

level

Level of the item - use 0 (zero) for top level items and increase by 1 for each nested level

name

A friendly name displayed to the user

url [optional]

For items that link, specify a URL (must be relative to the HTML page this menu is used on)

target [optional]

optional target frame for the link

expanded [optional - folders only]

set as true to expand this folder when the menu loads

title [optional]

optional title for the link (will use name if not supplied)

Items must be added in the order they appear when the menu is fully expanded. Always finish with ECMS_end_menu(); which generates the HTML code to display the menu on the page.

Adding items to folders

To add an item to a folder, set the level parameter to be one greater than the level of the folder. Folders are automatically created from previous items when new items are added to them.

In the example menu, there are two main sections: Home and Help (both are level 0). The Home folder has a number of items: About, Information, Contact, Logout. These items all have a level of 1 (one) and come before the Help folder is listed. Feedback is at level 2, so it belongs in the folder Contact (the closest folder before it with a level of 1).

An example menu

ECMS_add_item(0, 'Home', '', '', true, ''); // initially expanded top level
ECMS_add_item(1, 'About', '/about/', ''); // use blank '' for empty values, or omit them
ECMS_add_item(1, 'Information', '/info/', '', 'left'); // target the frame "left"
ECMS_add_item(1, 'Contact', '/contact/');
ECMS_add_item(2, 'Feedback', '/contact/feedback/', '', '', '', 'Feedback is welcome');
ECMS_add_item(1, 'Logout', '/logout/');
ECMS_add_item(0, 'Help', '/help/'); // 0 denotes a new top level menu item
ECMS_add_item(1, 'Search', '/search/');
ECMS_add_item(1, 'Sitemap', '/sitemap/');

ECMS_end_menu();

Further Instructions

1. Loading the javascript files
2. Creating a menu
3. Customising the menu style
4. Using multiple menus
5. Controlling the menu
6. Troubleshooting

Code in the javascript library is free to use (Unlicense). Enjoy! Feedback welcome.
© Ben Boyle 2003.