jQuery Menubar and web.sitemap

After HTML 5 Microsoft WebCamp Portugal, I came up with some interest in exploring the Menubar plugin.

This plugin transforms a list into a nice menu, and as such, I like to implement it on a project which I use web.sitemap.

To this, I needed to use an XSLT to transform the web.sitemap file, which is nothing more an XML, into an unordered list in a format required by Menubar.

Here’s an example of web.sitemap file:

To transform the XML file on an unordered list, I’ve used the next XSLT:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:map="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" exclude-result-prefixes="map"> <xsl:output method="xml" encoding="utf-8" indent="yes"/>

<xsl:template match="map:siteMapNode">

<xsl:template name="mapNode" match="/*/*"> xsl:apply-templates/ </xsl:template> </xsl:stylesheet>

This way, I’m getting an list like this:

Menu 1

• Submenu 1

Menu 2

• Submenu 2
• Submenu 3

Finally, we only need to add a XML control to render the list:

The insertion of XML control between an unordered list was deliberated, because only then we have the menu working properly and like the one on this site:

http://view.jqueryui.com/master/demos/menubar/default.html