Hi Jan,

Not quite sure why you are written your navigation in the way you have done?

I.e. Why the hard coded CSS and class names for specific levels as this limits your XSLT to only be used for a 2 level navigation. I have just cleaned up my standard navigation XSLT that I use to build navigations in the majority of sites that I have developed. You will need to add your CSS to style the navigation based on the top level UL ( see below )

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<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:template match="/">
  <ul id="nav">
    <li>
      <xsl:if test="$currentPage/@nodeName = 'Home'">
        <xsl:attribute name="class">current</xsl:attribute>
      </xsl:if>
      <a href="/">Home</a>
    </li>
  </ul>
  <xsl:call-template name="buildNav">
    <xsl:with-param name="node" select="$currentPage/ancestor-or-self::node [@level = 2]"/>
    <xsl:with-param name="id" select="string('treemenu1')"/>
  </xsl:call-template>
  </xsl:template>

  <xsl:template name="buildNav">
    <xsl:param name="node"/>
    <xsl:param name="id"/>

    <xsl:if test="$node/node [string(./data [@alias='umbracoNaviHide']) != '1']">
      <ul>
        <xsl:if test="$id != ''">
          <xsl:attribute name="id">
            <xsl:value-of select="$id"/>
          </xsl:attribute>
        </xsl:if>
        <xsl:for-each select="$node/node [string(./data [@alias='umbracoNaviHide']) != '1']">
          <li>
            <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
              <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>
            <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:attribute name="title">
                <xsl:value-of select="@nodeName"/>
              </xsl:attribute>
              <xsl:value-of select="@nodeName"/>
            </a>
            <xsl:if test="count(./node) &gt; 0">
              <xsl:call-template name="buildNav">
                <xsl:with-param name="node" select="."/>
              </xsl:call-template>
            </xsl:if>
          </li>
        </xsl:for-each>
      </ul>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

You might wish to add a check to see which level you are at and limit the amount of recursion if for example you have site content 3 layers deep but you only wish to show the first two in your main navigation.

And for the CSS

ul#nav li
{
Your top level CSS goes here
}
ul#nav li ul li
{
Your second level CSS goes here... I think you'll get the idea for the third level :)
}

I hope this helps :)

Thanks for your reply, Chris.  I am still a little unfamiliar with XSLT, so how would I code in logic to only display third level child nodes to display only when their direct parent node is selected?

Hi,

You could modify my above code and just add a of xsl:choose statement. I have not tested this and just written it directly into the forum so appologies for the formatting and if there is a bug! I think it is right though and should get you in the right direction :)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<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:template match="/">
  <ul id="nav">
    <li>
      <xsl:if test="$currentPage/@nodeName = 'Home'">
        <xsl:attribute name="class">current</xsl:attribute>
      </xsl:if>
      <a href="/">Home</a>
    </li>
  </ul>
  <xsl:call-template name="buildNav">
    <xsl:with-param name="node" select="$currentPage/ancestor-or-self::node [@level = 2]"/>
    <xsl:with-param name="id" select="string('treemenu1')"/>
  </xsl:call-template>
  </xsl:template>

  <xsl:template name="buildNav">
    <xsl:param name="node"/>
    <xsl:param name="id"/>

    <xsl:if test="$node/node [string(./data [@alias='umbracoNaviHide']) != '1']">
      <ul>
        <xsl:if test="$id != ''">
          <xsl:attribute name="id">
            <xsl:value-of select="$id"/>
          </xsl:attribute>
        </xsl:if>
        <xsl:for-each select="$node/node [string(./data [@alias='umbracoNaviHide']) != '1']">
<xsl:choose>
 <xsl:when test="current()/@level = 3 and current()/parent::node/@id != $currentPage/@id">

   <!-- Do nothing - You might want to change this to greater or equal to 3... -->

 </xsl:when>
 <xsl:otherwise>
          <li>
            <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
              <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>
            <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:attribute name="title">
                <xsl:value-of select="@nodeName"/>
              </xsl:attribute>
              <xsl:value-of select="@nodeName"/>
            </a>
            <xsl:if test="count(./node) &gt; 0">
              <xsl:call-template name="buildNav">
                <xsl:with-param name="node" select="."/>
              </xsl:call-template>
            </xsl:if>
          </li>
 </xsl:otherwise>
</xsl:choose>
        </xsl:for-each>
      </ul>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

Thanks, Chris! 

I've debugged your code and cannot figure out why on any level 1 node that the first level 2 node shows correcly, but every subsequent level 2 node show up nested beneth the first level 2 node.  However, when I navigate to a level 2 node, every <li> nests itself in the <ul> as it should.

Sorry to bother you so much, but XSLT is still a bit hazy for me.  Throw in a round of recursion, and my head starts spinning.

Hows about showing and hiding the subnav with a tiny bit of css?

ul#nav li ul { display: none }
ul#nav li.current ul { display: block }

Dan

is working on a reply...