TopXML JavaScript library : Simple JS Menu Tree using XSLT

Home Page

Add/Edit your code items

Search the code library

Browse for the code library

JavaScript
JavaScript
JavaScript Contents
xml report writer
Filtering Data Islands
Small XML/XSL application with JavaScript
Table Column sorting using XML, XSL and JavaScript
Display of Hierarchical Data Islands
x++ beta 0.2 release (includes ISAPI filter/interpreter)
HTTP File Commander
XML Ticker
Fading Ticker
How to understand the flow of control in XLST
Begginers, search the Bible
JavaScript Ticker (using Tabular Data Control)
-postfix.aspx>Infix <> Postfix
Nested Tables And Data Island
XML Data Traversal
TrimWhiteSpace
Two Tier Data Islands with Expanding/Collapsing Child elements.
Escape special characters using JavaScript and regular expressions
Sticky Table Headers
Dynamically Filling HTML Select Box from XML Data Island using Javascript.

LAMP >>

By	Mark Wilson I am the creator of TopXML. I am available for international and local (Australia) contracts. I am a Solution Architect/Business Analyst. I have worked in IT in several countries (NZ, Australia, South Africa, UK) building and training teams for government and very large non-governmental organizations. I am ex-Microsoft Consulting Services. I wrote the first book on Microsoft XML published in 2000 called XML Programming with VB and ASP. Most recently I have been building tools for the SEO industry. Ask me for a 37 point SEO health-checkup for your website.
First Posted	01/21/2002
Times viewed	536

Simple JS Menu Tree using XSLT

Summary This sample describes how to create a simple menu tree

xxx

Additional information
XSLT FILE: <!DOCTYPE xsl:stylesheet [ <!ENTITY sp " "> ~> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version='1.0'>  <xsl:template match="/"> <html> <head> <title>XML/XSL Sample Tree Menu</title> <script language="JavaScript"> <xsl:comment> <![CDATA[ function menuExpand(sID) { if (sID.style.display =="inline") sID.style.display ="none" else sID.style.display ="inline"; } function menuClick(sHRef) { document.location = sHRef; } function hiliteLeaf(oThis) { oThis.style.color = "blue"; oThis.style.cursor = "hand"; } function normal(oThis) { oThis.style.color = "black"; } function showHand(oThis) { oThis.style.cursor = "hand"; } ~~></xsl:comment> </script> </head> <body leftmargin="150" topmargin="20" bgcolor="lightblue" > <div><xsl:apply-templates select="/menusystem/menu/item"/></div> </body> </html> </xsl:template> <xsl:template match="/menusystem/menu/item"> <div> <xsl:variable name="thisID" select="generate-id(.)"/> <xsl:choose> <xsl:when test="./item"> <img src="PLUSHOT.GIF"> <xsl:attribute name="onMouseOver">showHand(this);</xsl:attribute> <xsl:attribute name="onClick"> menuExpand(<xsl:value-of select="$thisID"/>); </xsl:attribute> </img> &sp; <xsl:value-of select="@label" /> </xsl:when> <xsl:otherwise> <img src="MINHOT.GIF"></img> <span> <xsl:attribute name="onMouseOver">hiliteLeaf(this) </xsl:attribute> <xsl:attribute name="onMouseOut">normal(this) </xsl:attribute> <xsl:attribute name="onClick"> menuClick(<xsl:value-of select="$thisID"/>, '<xsl:value-of select="@href" />'); event.cancelBubble=true; </xsl:attribute> &sp; <xsl:value-of select="@label" /> </span> </xsl:otherwise> </xsl:choose> </div> <div style='display:none'> <xsl:attribute name="ID"> <xsl:value-of select="$thisID"/> </xsl:attribute> <xsl:apply-templates select="item" /> </div> </xsl:template> <xsl:template match="/menusystem/menu/item/item"> <div> <xsl:variable name="thisID" select="generate-id(.)"/> <xsl:choose> <xsl:when test="./subitem"> &sp;&sp;&sp;<img src="PLUSHOT.GIF"> <xsl:attribute name="onMouseOver">showHand(this);</xsl:attribute> <xsl:attribute name="onClick"> menuExpand(<xsl:value-of select="$thisID"/>); </xsl:attribute> </img> &sp; <xsl:value-of select="@label" /> </xsl:when> <xsl:otherwise> &sp;&sp;&sp;<img src="MINHOT.GIF"></img>&sp; <span> <xsl:attribute name="onMouseOver">hiliteLeaf(this) </xsl:attribute> <xsl:attribute name="onMouseOut">normal(this) </xsl:attribute> <xsl:attribute name="onClick"> menuClick(<xsl:value-of select="$thisID"/>, '<xsl:value-of select="@href" />'); event.cancelBubble=true; </xsl:attribute> <xsl:value-of select="@label" /> </span> </xsl:otherwise> </xsl:choose> </div> <div style='display:none'> <xsl:attribute name="ID"> <xsl:value-of select="$thisID"/> </xsl:attribute> <xsl:apply-templates select="subitem" /> </div> </xsl:template> <xsl:template match="/menusystem/menu/item/item/subitem"> <div> <xsl:variable name="thisID" select="generate-id(.)"/> <xsl:choose> <xsl:when test="./subitem"> <img src="PLUSHOT.GIF"> <xsl:attribute name="onMouseOver">showHand(this);</xsl:attribute> <xsl:attribute name="onClick"> menuExpand(<xsl:value-of select="$thisID"/>); </xsl:attribute> </img> &sp; <xsl:value-of select="@label" /> </xsl:when> <xsl:otherwise> &sp;&sp;&sp;&sp;&sp;&sp;<img src="MINHOT.GIF"></img>&sp; <span> <xsl:attribute name="onMouseOver">hiliteLeaf(this) </xsl:attribute> <xsl:attribute name="onMouseOut">normal(this) </xsl:attribute> <xsl:attribute name="onClick"> menuClick(<xsl:value-of select="$thisID"/>, '<xsl:value-of select="@href" />'); event.cancelBubble=true; </xsl:attribute> <xsl:value-of select="@label" /> </span> </xsl:otherwise> </xsl:choose> </div> <div style='display:none'> <xsl:attribute name="ID"> <xsl:value-of select="$thisID"/> </xsl:attribute> <xsl:apply-templates select="subsubitem" /> </div> </xsl:template> </xsl:stylesheet> XML FILE: <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="simplemenu2.xsl"?> <menusystem> <menu> <item label="File"> <item label="New" href="FileNew.xml"/> <item label="Open" href="FileOpen.xml"/> <item label="Save" href="FileSave.xml"/> <item label="Save As" href="FileSaveAs.xml"/> </item> <item label="Edit"> <item label="Copy" href="EditCopy.xml"/> <item label="Paste" href="EditPaste.xml"/> <item label="Cut" href="EditCut.xml"/> <item label="Find and Replace"> <subitem label="Find" href="FRFind.xml" /> <subitem label="Replace" href="FRReplace.xml" /> <subitem label="Replace All" href="FRReplaceAll.xml" /> </item> </item> <item label="Window"> <item label="Split" href="WindowSplit.xml" /> <item label="Cascade" href="WindowCascade.xml" /> <item label="Tile Horizontally" href="WindowTileHori.xml" /> <item label="Tile Vertically" href="WindowTileVerti.xml" /> </item> <item label="Help"> <item label="Contents" href="HelpContents.xml" /> <item label="Index" href="HelpIndex.xml" /> <item label="Search" href="HelpSearch.xml" /> </item> </menu> </menusystem>

Rate this article on a scale of 1 to 10 (1 votes, average 7)

Your vote :

LAMP >>


Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:



	Recent Jobs Sr. Software Engineer - Analytics Immediate Mainframe openings for Chennai Immediate TANDEM-TAL openings for Chenna Immediate ASP.NET/C# Openings for Chandi Sr. Software Engineer View all Jobs (Add yours) View all CV (Add yours)

	spfxmasks water softener Teleconference Host Department NOLIMIT Web Hosting MSN sunglasses conference calling

	Partners Dream.In.Code dotNet Slackers dotNet Spider Your HTML Source VisualBuilder.com DevGuru Planet Source Code ZVON.ORG Web Design ASPAlliance XML Pitstop Scripts The Spot 4 SAP Bitshop Web Hosting

Email TopXML