4thorder(TM) - Code Snippets and Full Scripts

[JavaScript / DHTML] DHTML Menu Expander [Version 2.0]

Version History:

(1/16/2005) Version 2.0:

Routine added to allow HTML elements within <TH> tag
Mouseover/Click handler options added
Single branch expansion option added
Vertical menu code/examples added
Image insertion option added (before or after <TH> content)
Transparency option added.
Fixed instructions concerning folder location of icon images.

(1/06/2005) Version 1.1: CSS Display bug in Opera, Firefox, and Netscape was fixed. [Thanks George of JavaScript Kit]

(1/02/2005) Version 1.0: Initial Release

Basic Description:

Menu system (vertical or horizontal) that allows for "click to expand/collapse" submenu selections. Script requires only a simple table contained within DIV element - NO other HTML code changes required. Setup controls are contained in one easy to use setup file containing detailed instructions. Options include: transparency level, Handler type (mouseover or click), single branch expansion option, and expanse/collapse icon placement settings. Multiple samples and documentation is provided for guidance. Menu look is set with CSS.

Tested in: Firefox, Internet Explorer, Netscape, Opera

Demonstration of Code:

Multiple Examples Here (opens in new window)

Code considerations:

Installation:
- All instructions are contained in the DHTML Menu Expander Installation Guide
- This file will also be provided with the download.
Limitations & Known issues:
- Can only hide one layer deep, therefore only good for one layer of menu. (possible future version option)
- Only one menu system per HTML page. (possible future version option)

Get the Code:

Download the .zip file containing everything here (Version 2.0)

Top of Page