2004 April 28, Dan Entous
revised 2007 Jan 28
I was looking for a way to create a menu tree similar to that used in MS Outlook and came across some code at the Microsoft Careers site that started me off. Still I needed some more information in order to get a cross-browser solution. Finally after some more research, testing, and an article at SitePoint I figured out a solution that works in DOM compatible browsers. The code is in the source of this page.
You can include the folder icon, replace it with your own image or eliminate it all together. Bullets can be used and included as part of the href or not. Below I've put together a sample of how the menu can be built with a few variations to illustrate the flexibility of the menu.
Recently I changed the code so that the menu tree begins open for non-DOM browsers and browsers that do not support JavaScript or have it turned-off but I find the trade-off undesirable - the menu tree "flashes" as the code closes the tree when the browser is DOM compatible. Still I left the code as is in case someone may want to implement this feature.
To Do
Create a dynamic method for handling longer menu chains.
Fix the indentation on the menu elements.
Find a better method for handling non-DOM compliant browsers.
Menu Item 1
Menu Item 3