Click here to Skip to main content
15,886,578 members
Articles / Web Development / CSS

Using XSLT to Generate a Multi-level Tree Menu from XML

Rate me:
Please Sign up or sign in to vote.
4.31/5 (9 votes)
28 Feb 20022 min read 213.3K   1.9K   46  
A simple and generic way to use XSLT to generate a multi-level HTML tree menu from an XML source
<%@ Language=VBScript %>
<% option explicit %>
<HTML>
<HEAD>
<link type="text/css" rel="stylesheet" href="TreeFromXMLUsingXSLT.css" />
</HEAD>
<BODY>
<b>Development</b>
<%
	dim xmlMenu
	dim xslMenu
	
	'Get the source XML
	set xmlMenu = server.CreateObject("Microsoft.XMLDOM")
	xmlMenu.async = false
	xmlMenu.load server.MapPath("TreeFromXMLUsingXSLT.xml")
	
	'Get the XSLT to transform the XML
	set xslMenu = server.CreateObject("Microsoft.XMLDOM")
	xslMenu.async = false
	xslMenu.load server.MapPath("TreeFromXMLUsingXSLT.xsl")
	
	'Transform the source XML using XSLT
	Response.Write xmlMenu.transformNode(xslMenu)
	
	set xmlMenu = nothing
	set xslMenu = nothing
%>

<script language="jscript">
function ExpanderClicked()
{
	//Get the element that was clicked
	var ctlExpander = event.srcElement;
	var ctlSelectedEntry = ctlExpander.parentElement;
	//Get all the DIV elements that are direct descendants
	var colChild = ctlSelectedEntry.children.tags("DIV");
	if(colChild.length > 0)
	{
		var strCSS;
		//Get the hidden element that indicates whether or not entry is expanded
		var ctlHidden = ctlSelectedEntry.all("hidIsExpanded");
		
		if(ctlHidden.value == "1")
		{
			//Entry was expanded and is being contracted
			ctlExpander.innerHTML = "+&nbsp;";
			ctlHidden.value = "0";
			strCSS = "NotVisible";
		}
		else
		{
			//Entry is being expanded
			ctlExpander.innerHTML = "-&nbsp;";
			ctlHidden.value = "1";
			strCSS = "IsVisible";
		}
		//Show all the DIV elements that are direct children
		for(var intCounter = 0; intCounter < colChild.length; intCounter++)
		{
			colChild[intCounter].className = strCSS;
		}
	}
}
</script>

</BODY>
</HTML>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


Written By
Web Developer
South Africa South Africa
I live in the Northern Suburbs of Cape Town (South Africa).

Comments and Discussions