xslt menu item issue

stephen 32 posts 52 karma points

Dec 09, 2010 @ 15:46

XSLT

Hey,

I have just attempted my first Xslt and I'm wondering if anyone can help with my problem.

I have a css class called active which is to change the color of the active menu item. I'm trying to get the menu item you've clicked to be marked as active and apply my css to it. However I can't seem to get it working. As I've said this is my first attempt at Xslt and I have looked around at tutorials and forums to try find a solution but I'm still having difficulty.

This is my code so far:

<xsl:template match="/">
    
  <xsl:variable name="rootNode" select="$currentPage/ancestor-or-self::* [@level = $level]"/>
    
  <ul class="menu">
        
    <li><!-- Add Home Node -->
            <a href="{umbraco.library:NiceUrl($rootNode/@id)}"><span>
              <xsl:value-of select="$rootNode/@nodeName"/></span>
            </a>
        
    </li>
        
    <xsl:for-each select="$rootNode/* [@isDoc and string(umbracoNaviHide) != '1']">
            
      <li>
                <a href="{umbraco.library:NiceUrl(@id)}"><span>
                    <xsl:value-of select="@nodeName"/></span>
                </a>
           
      </li> 
      
    </xsl:for-each>
    
  </ul>
</xsl:template>

I have tried adding if statements etc but I have had no luck. I also had a look at: http://our.umbraco.org/forum/developers/xslt/9965-xslt-menu-problems But again I'm unsure of how to apply it to my code.

Thanks

Copy Link

Bas Schouten 135 posts 233 karma points

Dec 09, 2010 @ 15:51

Hi Stephen,

I think you could use the folowing code:

<li> 
<xsl:if test="@id=$currentPage/@id">
  <xsl:attribute name="class">active</xsl:attribute>
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}">
 <span><xsl:value-of select="@nodeName"/></span> 
</a> 
</li>

Cheers,

Bas

Copy Link

stephen 32 posts 52 karma points

Dec 09, 2010 @ 16:06

Hi Bas,

Thanks for the speedy reply!

I have tried replacing the code in my for each loop with the suggested code above (I imagine thats were it should go) but it did not work for me. Any other ideas?

Thanks again

Copy Link

Bas Schouten 135 posts 233 karma points

Dec 09, 2010 @ 16:31

Hi Stephen,

I did a test with the code I use for topnavigation.

Could you try this one?

<?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" 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:variable name="level" select="1"/>
 <xsl:template match="/">
  <xsl:variable name="rootNode" select="$currentPage/ancestor-or-self::* [@level = $level]"/>
  <ul>
   <li>
    <a href="{umbraco.library:NiceUrl($rootNode/@id)}">
     <span>
      <xsl:value-of select="$rootNode/@nodeName"/>
     </span>
    </a>
   </li>
   <xsl:for-each select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
    <li>
     <a href="{umbraco.library:NiceUrl(@id)}">
      <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
       <xsl:attribute name="class">selected</xsl:attribute>
      </xsl:if>
      <xsl:value-of select="@nodeName"/>
     </a>
    </li>
   </xsl:for-each>
  </ul>
 </xsl:template>
</xsl:stylesheet>

Copy Link

stephen 32 posts 52 karma points

Dec 09, 2010 @ 18:20

Hi Bas,

The above kind of worked, when i added my css to the ul my menu shows up.

When I hover over the Home link it lights up but when i click it it does not stay selected.

But when I hover over other items in the menu they do not light up but when i click them they do stay selected. I tried adding the span tag to the code inside the for each loop but then all items behave like the home link and light up on hover but do not stay bright once clicked.

Is this an issue with my css or am I still missing somethnig in the Xslt?

Cheers for your help

Copy Link

Bas Schouten 135 posts 233 karma points

Dec 10, 2010 @ 08:44

Hi Stephen,

All items are working well except home. Is that correct?

We miss another bit on the home node.

<xsl:if test="$currentPage/@id =id"><xsl:attribute name="class">selected</ xsl: attribute></ xsl:if>

Otherwise it is an CSS issue.

Copy Link

stephen 32 posts 52 karma points

Dec 10, 2010 @ 21:50

Hi Bas,

I can't seem to get the above to work, I guess I need to look at more Xslt tutorials to try get my head around them. Also before I go looking at my css and more tutorials. Would you be able to tell me were to place the above if statement in the code because it does not seem to make any difference no matter were i place it. (sorry for such a newbie question)

Cheers

Copy Link

Kim Andersen 1447 posts 2196 karma points MVP

Dec 11, 2010 @ 00:01

Hi Stephen

If you want to set a class on your first a-tag(the one that links to your homepage), when you stand on the homepage, you should change this piece of code:

<li>
   <a href="{umbraco.library:NiceUrl($rootNode/@id)}">
     <span>
      <xsl:value-of select="$rootNode/@nodeName"/>
     </span>
   </a>
</li>

To this:

<li>
   <a href="{umbraco.library:NiceUrl($rootNode/@id)}">
      <xsl:if test="$rootNode/@id = $currentPage/@id">
       <xsl:attribute name="class">selected</xsl:attribute>
      </xsl:if>
     <span>
      <xsl:value-of select="$rootNode/@nodeName"/>
     </span>
   </a>
</li>

This code will put a class="selected" on your a-tag if you currently stands on the homepage.

/Kim A

Copy Link

stephen 32 posts 52 karma points

Dec 11, 2010 @ 15:47

Hey Guys,

The finally code sorted everything out for me and got it all working! Thank you both very much for the help its much appreciated.

Steve

Copy Link

is working on a reply...

Flag this post as spam?

Xslt menu item issue