Após o HTML 5 Microsoft WebCamp Portugal, surgiu-me algum interesse em explorar o plugin Menubar.
Este plugin transforma uma lista num menu bastante agradável, e como tal, gostava de o implementar num projecto em que utilizo o web.sitemap.
Para tal, precisei de recorrer a um XLST para transformar o web.sitemap, que não é mais que um XML, numa lista no formato que o Menubar necessita.
Segue então um exemplo do web.sitemap:
<?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>
Para transformar o XML numa lista, usei o seguinte 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>
Desta forma, irei obter uma lista igual à seguinte:
<?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>
Por fim, basta-nos adicionar um controlo XML que irá fazer o render da lista.
<ul id="bar1" class="menubar">
<asp:Xml runat="server" ID="xmlSiteMapViewer" DocumentSource="~/web.sitemap" TransformSource="~/sitemap.xslt" />
</ul>
A inserção do controlo entre uma “unordered list” foi propositado, pois só assim é que teremos o menu a funcionar correctamente e teremos um resultado identico ao que está no seguinte site:
http://view.jqueryui.com/master/demos/menubar/default.html
