TopXML XSLT library : A Slide-In Menu made with XML/XSLT

Home Page

Add/Edit your code items

Search the code library

Browse for the code library

XSLT
XSLT
XSLT Contents
What is SVG?
Family Tree maker
Alternative Ordering - ""Women and Children to the lifeboats first""
Restructuring flat delimited XML
Hex and Binary Conversions in XSLT - with Boolean math functions
Using XSLT to produce SVG (1)
Using XSLT to produce SVG (2)
Performance Tuning XSLT - Part 1
Performance Tuning XSLT - Part 2
Performance Tuning XSLT - Part 3
Performance Tuning XSLT - Part 4
Using XSLT to produce SVG (3)
XPath as parameters
Table with more than one column
Create an N-Column Table from XML node-set
Finding ""the corresponding node"" in a parallel subtree
Get the last item from a delimited list
Limitation to Muenchian method.
Find the number of tokens or words in a string
Randomization of node-sets or node-lists

<< XQuery .NET and XML >>

By	Pedro Gil
First Posted	01/31/2002
Times viewed	173

A Slide-In Menu made with XML/XSLT

This post contains attachments
v20020131201538.zip

Summary A simple menu build with XML/XSLT

Well this is one of my first snippets with this XSLT, so any comment are welcomed...

I tried to make simple menu navigation built with XSLT with the menu options in a XML file, this will build a fraction of HTML to be putted on the DIV section in the main HTML page. The hiding and show stuff is done using DHTML and a bit of JavaScript.

The structure of the XML file is the following:

For each separated menu you need to create a <menu> tag and define there the global settings for that menu. Then inside the menu you can make several division creating a child tag of <menu> named <separator ID=1 Description=XML Links> being that the @Description is the text that will be showed. And finally you create the items for that separator with the tag <option ID=1 Description=W3C url=http://www.w3c.org/> being that the @Description is the text that will be showed and the @url is the URL that will be used if the user clicks that item.

Additional information
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html"/> <xsl:template match="/"> <xsl:apply-templates select="/menus/menu"/> </xsl:template> <xsl:template match = "menu"> <div ID="{@ID}" style="Position:Absolute;Left:-{round((width div 10)) * 10};width:{(round((width div 10)) * 10) + 20};Top:{top}" onmouseover="fnOpen(this.style)" onmouseout="fnClose(this.style)"> <table border="0" width="{(round((width div 10)) * 10) + 20}" bgcolor="black" cellspacing="1">  <TR> <td align="left" width="{round((width div 10)) * 10}" bgcolor="{ColorSep}" colspan="2"> <font face="{FontFace}" Size="{FontSize}" COLOR="{FontColorSep}"> <b><xsl:value-of select = "separator[@ID = 1~/@Description"/></b> </font> </td> <td align="center" width="20" bgcolor="{ColorTit}" rowspan="100" valing="center"> <font face="{FontFace}" Size="{FontSize}" COLOR="{FontColorTit}"> <B> <xsl:call-template name="output-tokens"> <xsl:with-param name="list" select="title"/> </xsl:call-template> </B> </font> </td> </TR>  <xsl:apply-templates select="separator"> <xsl:with-param name = "pColorSep" select="ColorSep"/> <xsl:with-param name = "pFontFace" select="FontFace"/> <xsl:with-param name = "pFontSize" select="FontSize"/> <xsl:with-param name = "pFontColorSep" select="FontColorSep"/> <xsl:sort select = "@ID" /> </xsl:apply-templates> </table> </div> </xsl:template> <xsl:template match="separator"> <xsl:param name = "pColorSep"/> <xsl:param name = "pFontFace"/> <xsl:param name = "pFontSize"/> <xsl:param name = "pFontColorSep"/> <xsl:if test = "@ID != 1"> <TR> <td align="left" bgcolor="{$pColorSep}" colspan="2"> <font face="{$pFontFace}" Size="{$pFontSize}" COLOR="{$pFontColorSep}"> <b><xsl:value-of select = "@Description"/></b> </font> </td> </TR> </xsl:if> <xsl:apply-templates select="option"> <xsl:with-param name = "pColorOpt" select="parent::menu/ColorOpt"/> <xsl:with-param name = "pFontFace" select="$pFontFace"/> <xsl:with-param name = "pFontSize" select="$pFontSize"/> <xsl:with-param name = "pColorOptOver" select="parent::menu/ColorOptOver"/> <xsl:sort select = "@ID" /> </xsl:apply-templates> </xsl:template> <xsl:template match="option"> <xsl:param name = "pColorOpt"/> <xsl:param name = "pFontFace"/> <xsl:param name = "pFontSize"/> <xsl:param name = "pColorOptOver"/> <TR> <td align="left" bgcolor="{$pColorOpt}" colspan="2" onmouseover="bgColor='{$pColorOptOver}'" onmouseout="bgColor='{$pColorOpt}'"> <font face="{$pFontFace}" Size="{$pFontSize}"> <A HREF="{@url}" TARGET="main"><xsl:value-of select="@Description"/></A> </font> </td> </TR> </xsl:template> <xsl:template name="output-tokens">  <xsl:param name="list"/> <xsl:variable name="first" select="substring($list,1,1)"/> <xsl:variable name="rest" select="substring($list,2,string-length($list))"/> <xsl:value-of select="$first"/> <xsl:if test="$rest"> <br/> <xsl:call-template name="output-tokens"> <xsl:with-param name="list" select="$rest"/> </xsl:call-template> </xsl:if> </xsl:template> </xsl:stylesheet>

Further additional information
<menus> <menu ID="1"> <title>TECHNICAL LINKS</title> <top>50</top> <width>250</width> <FontFace>Verdana</FontFace> <FontSize>2</FontSize> <ColorTit>DarkBlue</ColorTit> <FontColorTit>White</FontColorTit> <ColorSep>DarkBlue</ColorSep> <FontColorSep>White</FontColorSep> <ColorOpt>White</ColorOpt> <ColorOptOver>Yellow</ColorOptOver> <separator ID="1" Description="XML Links"> <option ID="1" Description="W3C" url="http://www.w3c.org"/> <option ID="2" Description="VBXML" url="http://www.vbxml.com"/> <option ID="3" Description="XML.Com" url="http://www.xml.com"/> </separator> <separator ID="3" Description="VB Links"> <option ID="1" Description="Randy Birch" url="http://www.mvps.org/vbnet/"/> <option ID="2" Description="Karl E. Peterson's" url="http://www.mvps.org/vb/"/> </separator> <separator ID="2" Description="Access Links"> <option ID="1" Description="My Home Page" url="http://www.geocities.com/pmpg98_pt"/> <option ID="2" Description="Dev Ashish" url="http://www.mvps.org/access"/> <option ID="3" Description="Stephen Lebans" url="http://www.lebans.com"/> </separator> </menu> <menu ID="2"> <title>OTHER LINKS</title> <top>300</top> <width>100</width> <FontFace>Verdana</FontFace> <FontSize>2</FontSize> <ColorTit>Red</ColorTit> <FontColorTit>black</FontColorTit> <ColorSep>yellow</ColorSep> <FontColorSep>black</FontColorSep> <ColorOpt>White</ColorOpt> <ColorOptOver>red</ColorOptOver> <separator ID="1" Description="Music"> <option ID="1" Description="AMG" url="http://www.allmusic.com"/> <option ID="2" Description="CDDB" url="http://www.cddb.com/"/> <option ID="3" Description="MP3.Com" url="http://www.mp3.com/"/> </separator> <separator ID="2" Description="Cinema"> <option ID="1" Description="IMDB" url="http://www.imdb.com/"/> </separator> </menu> </menus>

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

Your vote :

<< XQuery .NET and XML >>


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



	Recent Jobs A great opportunity to Digital Video Eng here is a greate opportunity as a SMS En A great opportunity as a Network Enginee A Greate Opportunituy as a SQL Developer An immediate job opportunity as a Biztal View all Jobs (Add yours) View all CV (Add yours)

	Host Department NOLIMIT Web Hosting Web Design Portfolio cfxmasks Gucci sunglasses NY Pool Contractor answering service conference calls swimming pool builder Teleconference MSN sunglasses

	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