Geeks With Blogs

News
Tiago Salgado .NET / SQL Server / IT / etc...

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:

<?xml version="1.0" encoding="utf-8"?> 
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> 
<siteMapNode url="~/" title="Home" description="Home"> 
<siteMapNode url="" title="Menu 1" description="Menu 1" > 
<siteMapNode url="http://www.google.pt" title="Submenu 1" description="Submenu 1" /> 
</siteMapNode> 
<siteMapNode url="" title="Menu 2" description="Menu 2"> 
<siteMapNode url="http://www.microsoft.com" title="Submenu 2" description="Submenu 2" /> 
<siteMapNode url="http://www.apple.com" title="Submenu 3" description="Submenu 3" /> 
</siteMapNode> 
</siteMapNode> 
</siteMap> 

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

<?xml version="1.0" encoding="utf-8"?> 
<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"> 
<li> 
<a href="{@url}" title="{@description}"> 
<xsl:value-of select="@title"/> 
</a> 
<xsl:if test="map:siteMapNode"> 
<ul> 
<xsl:call-template name="mapNode"/> 
</ul> 
</xsl:if> 
</li> 
</xsl:template>

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

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

<?xml version="1.0" encoding="utf-16" ?> 
<li><a href="" title="Menu 1">Menu 1</a> 
<ul> 
<li><a href="http://www.google.pt" title="Submenu 1">Submenu 1</a></li> 
</ul> 
</li> 
<li><a href="" title="Menu 2">Menu 2</a> 
<ul> 
<li><a href="http://www.microsoft.com" title="Submenu 2">Submenu 2</a></li> 
<li><a href="http://www.apple.com" title="Submenu 3">Submenu 3</a></li> 
</ul> 
</li>

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

<ul id="bar1" class="menubar"> 
<asp:Xml runat="server" ID="xmlSiteMapViewer" DocumentSource="~/web.sitemap" TransformSource="~/sitemap.xslt" /> 
</ul>

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

Posted on Wednesday, May 11, 2011 10:36 PM | Back to top


Comments on this post: jQuery Menubar and web.sitemap

# re: jQuery Menubar and web.sitemap
Requesting Gravatar...
genius work
Left by Omar on Mar 08, 2012 10:15 PM

# re: jQuery Menubar and web.sitemap
Requesting Gravatar...
I do not see the hour for yours the most useful posts. You might regard, in each detail very well.
Left by slimex 15 on Mar 19, 2012 2:53 PM

# re: jQuery Menubar and web.sitemap
Requesting Gravatar...
How to use security trimming with this xslt. Currently it shows up all the menus irrespective of security.
Left by Rajesh Kumar on Jul 24, 2014 5:12 AM

Your comment:
 (will show your gravatar)


Copyright © Tiago Salgado | Powered by: GeeksWithBlogs.net