Introduction

This article will demonstrate a simple and generic way to use XSLT to
generate a multi-level HTML tree menu from an XML source. JScript is used for
expanding and contracting the menu entries. (This requires a minimum of Internet
Explorer 5. I have not tested this on any other browsers.)

The XML Source

This is a subset of the source XML (full XML source is in the zip file).

Style setting

CSS settings are used to specify if a menu entry should be visible or hidden.
The IsVisible class sets the element to be displayed,
as a block element. The NotVisible class sets the
element to be hidden.

The last setting (.Parent DIV) indicates that only the
elements below the one with the "Parent" class, will have a margin. This is to
prevent the root menu entries from also having a margin.

Using images instead of + and -

It is fairly simple to show images instead of a "+" and "-" next to each
entry. To do this, alter the XSLT and replace the <label> element that is next to the link, with an <img> element. In the JScript, instead of setting the
InnerHTML property of the ctlExpander variable, set the src
attribute to show a different image. Here is an example:

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

About the Author

Comments and Discussions

I've been trying to get this to work with no success. I can't even get it to work imbeding it in simple html. I used the javascript above and put the following in the body to just do a single child/parent tree. The parent is visible and the child is not, like it should be, but it won't expand.