Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • stephen 32 posts 52 karma points
    Dec 09, 2010 @ 15:46
    stephen
    0

    Xslt menu item issue

    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

  • Bas Schouten 135 posts 233 karma points
    Dec 09, 2010 @ 15:51
    Bas Schouten
    0

    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

  • stephen 32 posts 52 karma points
    Dec 09, 2010 @ 16:06
    stephen
    0

    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

  • Bas Schouten 135 posts 233 karma points
    Dec 09, 2010 @ 16:31
    Bas Schouten
    0

    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>
  • stephen 32 posts 52 karma points
    Dec 09, 2010 @ 18:20
    stephen
    0

    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

  • Bas Schouten 135 posts 233 karma points
    Dec 10, 2010 @ 08:44
    Bas Schouten
    0

    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.

  • stephen 32 posts 52 karma points
    Dec 10, 2010 @ 21:50
    stephen
    0

    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

  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 11, 2010 @ 00:01
    Kim Andersen
    0

    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

  • stephen 32 posts 52 karma points
    Dec 11, 2010 @ 15:47
    stephen
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft