Creating a 'selected' state on a sub-navigation bar
Hi,
I'm trying to figure out the best way of implementing a 'selected' state on my sub-navigation bar (and hopefully the main navigation afterwards). This is the code I'm working with, but I'm hoping to alter the appearance of the selected page on the sub-navigation bar. Could anybody point me in the right direction?
Creating a 'selected' state on a sub-navigation bar
Hi,
I'm trying to figure out the best way of implementing a 'selected' state on my sub-navigation bar (and hopefully the main navigation afterwards). This is the code I'm working with, but I'm hoping to alter the appearance of the selected page on the sub-navigation bar. Could anybody point me in the right direction?
Thanks for any help,
Philip
Code:
<ul id="subNavHolder">
<xsl:choose>
<xsl:when test="$currentPage/@nodeName = 'Homepage'">
<li>
<a href="/products/page1.aspx"> PAGE 1</a>
</li>
<li>
<a href="/products/page2.aspx">PAGE 2</a>
</li>
<li>
<a href="/products/page3.aspx">PAGE 3</a>
</li>
<li>
<a href="/products/page4.aspx">PAGE 4</a>
</li>
</xsl:when>
<xsl:when test="$currentPage/@nodeName = 'NEWS'"></xsl:when>
<xsl:otherwise>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [ @isDoc and string(@id) != '2144' and name($currentPage) != 'newsArticle' and name($currentPage) != 'Competition']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="translate(@nodeName, $smallcase, $uppercase)"/>
</a>
</li>
</xsl:for-each>
</xsl:otherwise>
</xsl:choose>
</ul>
Hi Philip
I guess that you want to put a class on your <li> or <a> if the page or one of it's children is the current page. Am I right?
If that's the case, I'm prety sure that you can extend your for-each to something like this:
This should put a class called selected on the <li>-element if the current page is the same as the clicked menu item.
/Kim A
Perfect, thanks Kim!
You are very welcome Philip!
/Kim A
is working on a reply...