XSLT 1.0: Generating an ancestor menu hierarchy - xslt

Question

This should be so simple! I have an XML document containing a menu hierarchy:
<?xml version="1.0" encoding="utf-8"?>
<menu page_id="18" language="en-GB">
<item id="1" child_of="0">
<menu_order>1</menu_order>
<title><![CDATA[Home]]></title>
</item>
<item id="18" child_of="0">
<title><![CDATA[Page One]]></title>
<submenu child_of="18">
<item id="20" child_of="18">
<title><![CDATA[Sub Menu One]]></title>
<submenu child_of="20">
<item id="26" child_of="20">
<title><![CDATA[SubMenu 1-1]]></title>
</item>
<item id="27" child_of="20">
<title><![CDATA[SubMenu 1-2]]></title>
</item>
</submenu>
</item>
<item id="21" child_of="18">
<title><![CDATA[Sub Menu Two]]></title>
<submenu child_of="21">
<item id="28" child_of="21">
<title><![CDATA[SubMenu 2-1]]></title>
</item>
<item id="29" child_of="21">
<title><![CDATA[SubMenu 2-2]]></title>
<submenu child_of="29">
<item id="32" child_of="29">
<title><![CDATA[SubMenu 2-2-1]]></title>
</item>
<item id="33" child_of="29">
<title><![CDATA[SubMenu 2-2-2]]></title>
</item>
</submenu>
</item>
<item id="30" child_of="21">
<title><![CDATA[SubMenu 2-3]]></title>
</item>
<item id="31" child_of="21">
<title><![CDATA[SubMenu 2-4]]></title>
</item>
</submenu>
</item>
<item id="22" child_of="18">
<title><![CDATA[Sub Menu Three]]></title>
</item>
</submenu>
</item>
<item id="19" child_of="0">
<title><![CDATA[Page Two]]></title>
</item>
</menu>
I need to transform it into an HTML list where (1) if the active/clicked menu item has a submenu, it shows the submenu (only the menu's child items) underneath it. For example, clicking on item id = "18" should give me this:
<ul>
<li id="1">Home</li>
<li id="18">Page One
<ul>
<li id="20">Sub Menu One</li>
<li id="21">Sub Menu Two</li>
<li id="22">Sub Menu Three</li>
</ul>
</li>
<li id="19">Page Two</li>
</ul>
Or (2) if the active menu item has ancestors, it renders all of its immediate siblings and ancestors in the structure. For example, clicking item id="33" should give me this:
<ul>
<li id="1">Home</li>
<li id="18">Page One<ul>
<li id="20">Sub Menu One</li>
<li id="21">Sub Menu Two<ul>
<li id="28">SubMenu 2-1</li>
<li id="29">SubMenu 2-2
<ul>
<li id="32">SubMenu 2-2-1</li>
<li id="33">SubMenu 2-2-2</li>
</ul>
</li>
<li id="30">SubMenu 2-3</li>
<li id="31">SubMenu 2-4</li>
</ul>
</li>
<li id="22">Sub Menu Three</li>
</ul>
</li>
<li id="19">Page Two</li>
</ul>
My trouble is that that my XSL style sheet produces a list with TWO ancestors submenus! Please help ... I've been at this for HOURS! Here's my XSLT:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output indent="yes"/>
<!-- The DOM ID of the active menu item -->
<xsl:param name="activeItemID"/>
<xsl:template match="text()">
<xsl:apply-templates/>
</xsl:template>
<xsl:template match="menu">
<ul>
<xsl:choose>
<xsl:when test="//item[#id = $activeItemID]/#child_of = '0'">
<xsl:choose>
<xsl:when test="//submenu[#child_of = $activeItemID]/node()">
<xsl:apply-templates
select="//item[#child_of = '0'] | //submenu[#child_of = $activeItemID]"/>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates select="//item[#child_of = '0']"/>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="//submenu[#child_of = $activeItemID]/node()">
<xsl:apply-templates
select="//item[#child_of = '0'] | //submenu[#child_of = $activeItemID]/ancestor-or-self::submenu/item"
/>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates
select="//item[#child_of = '0'] | //item[#id = $activeItemID]/ancestor-or-self::submenu"
/>
</xsl:otherwise>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
</ul>
</xsl:template>
<xsl:template match="item">
<li>
<xsl:value-of select="title" disable-output-escaping="no"/>
<xsl:apply-templates select="submenu[#child_of = $activeItemID]"/>
</li>
</xsl:template>
<xsl:template match="submenu">
<ul>
<xsl:apply-templates select="item[#child_of = $activeItemID]">
<xsl:sort select="menu_order" data-type="number"/>
</xsl:apply-templates>
</ul>
</xsl:template>
</xsl:stylesheet>

Answer 1

This XSLT should do what you are looking to do:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output indent="yes"/>
<!-- The DOM ID of the active menu item -->
<xsl:param name="activeItemID" />
<xsl:template match="menu | submenu">
<ul>
<xsl:apply-templates select="item" />
</ul>
</xsl:template>
<xsl:template match="item">
<li id="{#id}">
<xsl:value-of select="title" />
<xsl:apply-templates select="submenu[..//#id = $activeItemID]"/>
</li>
</xsl:template>
</xsl:stylesheet>
When run on your sample input with the parameter value as 18, it produces:
<ul>
<li id="1">Home</li>
<li id="18">
Page One<ul>
<li id="20">Sub Menu One</li>
<li id="21">Sub Menu Two</li>
<li id="22">Sub Menu Three</li>
</ul>
</li>
<li id="19">Page Two</li>
</ul>
When run with the parameter value as 33, it produces:
<ul>
<li id="1">Home</li>
<li id="18">
Page One<ul>
<li id="20">Sub Menu One</li>
<li id="21">
Sub Menu Two<ul>
<li id="28">SubMenu 2-1</li>
<li id="29">
SubMenu 2-2<ul>
<li id="32">SubMenu 2-2-1</li>
<li id="33">SubMenu 2-2-2</li>
</ul>
</li>
<li id="30">SubMenu 2-3</li>
<li id="31">SubMenu 2-4</li>
</ul>
</li>
<li id="22">Sub Menu Three</li>
</ul>
</li>
<li id="19">Page Two</li>
</ul>
Your XSLT had some sorting logic, but the element that was being used for the sort only seemed to be present in the source XML in one place. Was that something you wanted to use? Did you omit most of the menu_order elements from the source XML for simplicity?