Instructions for Expandable/Collapsible Menu System [ECMS]

1. Loading the javascript files
   1. Scripts explained
   2. Loading the core system
   3. Loading the platform libraries
   4. Loading the configuration file(s)
2. Creating a menu
3. Customising the menu
4. Using multiple menus
5. Troubleshooting

Scripts explained

There are three parts to the ECMS scripts:

Configuration	ecms_config.js	Holds all the custom information for your menu
Core system	ecms_system.js	Core components - selects and loads platform library
Platform libraries	ecms_system_id.js	DOM supported by Internet Explorer 4/5 and Netscape 6
	ecms_system_layer.js	Netscape 4 proprietary DOM (uses layers)
	ecms_system_default.js	Static HTML generation (uses UL)

Loading the core system

The system files can be shared by all the menus and only need to be uploaded once. It is recommended these files be placed in a /js/ecms/ directory.

Loading the platform libraries

Unless all scripts are kept in the same directory as the HTML files, adjustments to ecms_system.js are required. Open the file in any text editor and look for this code near the top:

// LOADER - loads browser specific version
if (document.getElementById) {
// standard - Netscape6, IE 4/5
document.writeln('<script language="Javascript" type="text\/javascript" src="ecms_system_id.js"><\/script>');
} else if (document.layers) {
// layers (Netscape 4, 3)
document.writeln('<script language="Javascript" type="text\/javascript" src="ecms_system_layer.js"><\/script>');
} else {
// default - uses UL/LI display
document.writeln('<script language="Javascript" type="text\/javascript" src="ecms_system_default.js"><\/script>');
}

The src attributes in the <script> tags must refer to the correct location of the ecms_system_*.js files. As these <script> tags are written into the HTML file, the URLs must be relative to the HTML file, NOT relative to the ecms_system.js file.

For example, if these scripts were located in the ~username/js/ecms/ directory, all src attributes should link to \/~username\/scripts\/ecms\/ (relative to the root directory on the webserver). Note: The / (backslash) character needs to be escaped with \ (forward slash) on some javascript platforms. This is why /js/ecms/ becomes \/scripts\/ecms\/, which works on all versions of javascript.

// LOADER - loads browser specific version
if (document.getElementById) {
// standard - Netscape6, IE 4/5
document.writeln('<script language="Javascript" type="text\/javascript" src="\/~username\/scripts\/ecms\/ecms_system_id.js"><\/script>');
} else if (document.layers) {
// layers (Netscape 4, 3)
document.writeln('<script language="Javascript" type="text\/javascript" src="\/~username\/scripts\/ecms\/ecms_system_layer.js"><\/script>');
} else {
// default - uses UL/LI display
document.writeln('<script language="Javascript" type="text\/javascript" src="\/~username\/scripts\/ecms\/ecms_system_default.js"><\/script>');
}

Loading the configuration file(s)

The menu configuration file can be uploaded to any location as it is linked separately on each web page. If you have multiple menus on a single page, you will need multiple configuration files. The configuration file does not have to be named ecms_config.js - this is simply the name of the sample file provided.

Further instructions

1. Loading the javascript files
2. Creating a menu
3. Customising the menu
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.