I'm creating a submenu where I want the items that have subitems to be expandable, and the only item I want to be expanded that is currently selected or if one of it's subitems selected. The item becomes expanded when the <xsl:if test="$currentPage/@id = current()/@id"> becomes true.
Actually my problem is in checking whether the current item belongs to
I think that what you should do is make sure all the levels of the navigation gets listed
Then you should design it using CSS and then finally add the collapsible effect using JavasScript (For instance a plugin or something based on jQuery) to achieve the expandle/collapsible effect.
You can't achieve the effect using XSLT only if I understand your question correctly.
Like Jan said, you should be using the XSLT to output the menu content and then use javascript for creating the actual expand/collapse menu. I digged this up for you:
XSLT Collapsible and expandable submenu
Hi everyone,
I'm creating a submenu where I want the items that have subitems to be expandable, and the only item I want to be expanded that is currently selected or if one of it's subitems selected. The item becomes expanded when the <xsl:if test="$currentPage/@id = current()/@id"> becomes true.
Actually my problem is in checking whether the current item belongs to
the item that should be expanded. I tried to use
current()/descendant-or-self::node[@id = $currentPage/@id]
but that did not help.
Could you help me please?
Here is the full version of my XSLT code:
<?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"
xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon"
xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes"
xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions"
xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:param name="level" select="1"/>
<xsl:param name="strCSS" select="5"/>
<xsl:variable name="stopLevel" select="/macro/maxDepth"/>
<xsl:variable name="mystartNodeId" select="/macro/startNodeId"/>
<xsl:variable name="cssClass" select="/macro/NavigationCSSClass"/>
<xsl:variable name="cssID" select="/macro/NavigationCSSId"/>
<xsl:variable name="boolImageLink" select="/macro/navImageLink"/>
<xsl:variable name="IDSelectorPrefix" select="/macro/IDPrefix"/>
<xsl:variable name="disableNav" select="/macro/disableNav"/>
<xsl:variable name="ancestorNode" select = "$currentPage/ancestor-or-self::* [@isDoc and @level=2]"/>
<xsl:template match="/"><xsl:call-template name="menu">
<xsl:with-param name="level" select="$level"/>
</xsl:call-template></xsl:template>
<xsl:template name="menu">
<xsl:param name="level"/>
<xsl:if test="string($cssClass)">
<xsl:attribute name="class">
<xsl:value-of select="$cssClass"/> level_{$level}
<xsl:if test="$disableNav = 1"> disabled</xsl:if>
</xsl:attribute> </xsl:if>
<xsl:if test="$cssID!= ''">
<xsl:attribute name="id"> <xsl:value-of select="$cssID"/>
</xsl:attribute></xsl:if>
<div>
<xsl:if test="count($ancestorNode/* [@isDoc and string(umbracoNaviHide) != '1']) > '0'">
<xsl:for-each select="$ancestorNode/* [@isDoc and string(umbracoNaviHide) != '1']">
<div style="padding-left:{$strCSS}px">
<xsl:attribute name="class">menuItem
<xsl:if test="$currentPage/@id = current()/@id"> selected</xsl:if>
<xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) > '0'"> expandable</xsl:if>
</xsl:attribute>
<div>
<xsl:attribute name="class">inner</xsl:attribute>
<div>
<xsl:attribute name="class">theText
</xsl:attribute>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
<xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) > '0'">
<xsl:if test="$currentPage/@id = current()/@id or current()/descendant-or-self::node[@id = $currentPage/@id]">
<xsl:call-template name="submenu">
<xsl:with-param name="strCSS">
<xsl:value-of select="$strCSS+10" />
</xsl:with-param>
</xsl:call-template>
</xsl:if>
</xsl:if>
</div>
</div>
</div>
</xsl:for-each>
</xsl:if>
</div>
</xsl:template>
<xsl:template name="submenu">
<xsl:param name="strCSS"/>
<xsl:for-each select="current()/* [@isDoc and string(umbracoNaviHide) != '1']">
<div style="padding-left:{$strCSS}px">
<xsl:attribute name="class">menuItem
<xsl:if test="$currentPage/@id = current()/@id"> selected</xsl:if>
<xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) > '0'"> expandable</xsl:if>
</xsl:attribute>
<div>
<xsl:attribute name="class">inner</xsl:attribute>
<div>
<xsl:attribute name="class">theText
</xsl:attribute>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
</div>
</div>
</div>
<xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) > '0'">
<xsl:if test="$currentPage/@id = current()/@id or current()/descendant-or-self::node[@id = $currentPage/@id]">
<xsl:call-template name="submenu">
<xsl:with-param name="strCSS">
<xsl:value-of select="$strCSS+10" />
</xsl:with-param>
</xsl:call-template>
</xsl:if>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
Best Regards,
Andrei Yazik
Hi Andrei
I think that what you should do is make sure all the levels of the navigation gets listed
Then you should design it using CSS and then finally add the collapsible effect using JavasScript (For instance a plugin or something based on jQuery) to achieve the expandle/collapsible effect.
You can't achieve the effect using XSLT only if I understand your question correctly.
Cheers
/Jan
Like Jan said, you should be using the XSLT to output the menu content and then use javascript for creating the actual expand/collapse menu. I digged this up for you:
http://plugins.jquery.com/project/mbMenu
... and a demo of it in action:
http://pupunzi.com/#mb.components/mb._menu/menu.html
All the best,
Bo
Thanks everyone for your answers!
is working on a reply...