Current class within a Top Navigation which populates dynamically via umbraco
hi,
I managed to populate my top navigation via umbraco but i am at a loss when trying to populate the current page class within a <LI>
The top navigation has drop downs so the loop threw the navigation needed to loo at childrenaswell to populate the dropdown in the nave which are also <LI>within a nested <UL>
If you need all LIs in the current chain marked as opposed to just the current page I would have to have a look to see how I did that as I can't rememebr off the top of my head :o)
The problem is that the top navigation has children which drop down from the top navigation so i need the top navigation to populate the prents and the children from the top navigation and hightlight the current within the loop populating the children. within the nested <UL>, effectively producting the below baed on the umbraco nodes.
Current class within a Top Navigation which populates dynamically via umbraco
hi,
I managed to populate my top navigation via umbraco but i am at a loss when trying to populate the current page class within a <LI>
The top navigation has drop downs so the loop threw the navigation needed to loo at childrenaswell to populate the dropdown in the nave which are also <LI>within a nested <UL>
code goes as follows
<!-- menu -->
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="index.html">Home</a></li>
<li><a href="inner.html">Drop-Down Menu</a>
<ul><li><a href="inner.html">child page</a></li><li><a href="inner.html">child page</a></li><li><a href="inner.html">child page</a></li></ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<!-- /menu -->
I am at a lose, any help would be much appricated.
Hi Neil
I think it would be much more easy to help you out if you provide us with a snippet of your XSLT code generating the above output.
/Jan
If I understand you correctly, you want something like:
If you need all LIs in the current chain marked as opposed to just the current page I would have to have a look to see how I did that as I can't rememebr off the top of my head :o)
The problem is that the top navigation has children which drop down from the top navigation so i need the top navigation to populate the prents and the children from the top navigation and hightlight the current within the loop populating the children. within the nested <UL>, effectively producting the below baed on the umbraco nodes.
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="index.html">Home</a></li>
<li><a href="inner.html">Drop-Down Menu</a>
<ul><li><a href="inner.html">child page</a></li><li><a href="inner.html">child page</a></li><li><a href="inner.html">child page</a></li></ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
i understand how to to do this on the parent it managing the children. any help would be much appricaited.
Hi Neil
Could you show us your XSLT code that produces your navigation?
/Kim A
Something like this? This will highlight the top level node if any of its children match the current page.
<ul> <xsl:for-each select="$topItems"> <li> <a href="index.html"> <xsl:if test="string(.//*[@id = $currentPage/@id]) != ''"> <xsl:attribute name="class">current</xsl:attribute> </xsl:if> <xsl:value-of select="@nodeName"/><!-- e.g. Home --> </a> </li> <li> <a href="inner.html">Drop-Down Menu</a> <ul> <xsl:for-each select="$topItems/*[@isDoc = 1]"><!-- Select children with whatever criteria you want --> <!-- Print children --> </xsl:for-each> </ul> </li> </xsl:for-each> </ul>
Actually, change:
string(.//*[@id = $currentPage/@id]) != ''
to:
string(./descendant-or-self::*[@id = $currentPage/@id]) != ''
or it won't highlight Home when you are on the home page.
I post it up tonight. thanks for the quick reply.
my current xslt without a current class
<?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"/>
<!-- update this variable on how deep your site map should be -->
<xsl:variable name="maxLevelForSitemap" select="4"/>
<xsl:template match="/">
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="$currentPage/ancestor-or-self::* [@isDoc and @level=1]"/>
</xsl:call-template>
</xsl:template>
<xsl:template name="drawNodes">
<xsl:param name="parent"/>
<xsl:if test="umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or (umbraco.library:IsProtected($parent/@id, $parent/@path) = 1 and umbraco.library:IsLoggedOn() = 1)">
<ul id="menu"><xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level <= $maxLevelForSitemap]">
<li>
<a class="current" href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/></a>
<xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level <= $maxLevelForSitemap]) > 0">
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="."/>
</xsl:call-template>
</xsl:if>
</li>
</xsl:for-each>
</ul>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
Hi Neil
Have you tried adding the xsl:if suggested by Rob?
/Jan
i do not have the following within my xslt
string(.//*[@id = $currentPage/@id]) != ''
Sorry, I meant change that condition within my suggested code, not in yours :o)
In your code, I think what you want to do is change:
<a class="current" href="{umbraco.library:NiceUrl(@id)}">
to:
Try changing this line:
to this:
/Kim A
worked a treat thanks guys.
is working on a reply...