The menus at our old site at http://www.kadonk.com has a few special tricks to them. The current selection has an "active" class, and the last entry as an "last" class as well. I also do not have sub-menus as drop down from the main menu. Nothing fancy, but different enough from the WebsiteWizard package that I had to jump into the horrible world of XSLT programming.
I'm sure XSLT is GREAT, but coming from Visual Studio and C#, it feels like being hit in the head with a wet fish. Again, an editor with no context help, no auto-indentation, and basically just a dumb text-editor. I wonder how many new users drops umbraco because of this...
Anyway, after some meddling in XSLT (Copy and Paste), I managed to create a script that could set the required classes...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:param name="currentPage"/>
<xsl:variable name="level" select="1"/>
<xsl:template match="/">
<script type="text/javascript">
<xsl:text disable-output-escaping="yes"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav")
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></xsl:text>
</script>
<xsl:call-template name="printListe">
<xsl:with-param name="node" select="$currentPage/ancestor-or-self::node [@level = 1]"/>
<xsl:with-param name="id" select="string('nav')"/>
</xsl:call-template>
</xsl:template>
<xsl:template name="printListe">
<xsl:param name="node"/>
<xsl:param name="id"/>
<ul>
<!-- node [@nodeTypeAlias != 'wwNews'] -->
<xsl:if test="$id != ''">
<xsl:attribute name="id"><xsl:value-of select="$id"/></xsl:attribute>
</xsl:if>
<xsl:for-each select="$node/node [@nodeTypeAlias != 'wwNewsItem' and string(./data [@alias='umbracoNaviHide']) != '1'] ">
<li>
<xsl:if test="position()=last()">
<xsl:attribute name="class">last</xsl:attribute>
</xsl:if>
<xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
<xsl:attribute name="class">active</xsl:attribute>
<xsl:if test="position()=last()">
<xsl:attribute name="class">active last</xsl:attribute>
</xsl:if>
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="@nodeName"/></a>
<!-- recursive here
<xsl:if test="count(./node) > 0">
<xsl:call-template name="printListe">
<xsl:with-param name="node" select="."/>
</xsl:call-template>
</xsl:if>
-->
</li>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
The bold parts contains my puny edits (I removed the recursive element to avoid submenus). Man, I hope I don't have to do much of this...
I also wanted to hide news items, as they don't belong in my menus. So, I had to create a new generic property on my News page: umbracoNaviHide. Setting this to true will remove it from the menu (as can be seen in the script above).