Copied to clipboard

Flag this post as spam?

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


  • Sean Dooley 3 posts 23 karma points
    Dec 09, 2010 @ 12:50
    Sean Dooley
    0

    Link Class & Selected Page

    I am looking to set a class on each navigation link, i.e. home, about, etc. as well as adding a selected class to the current page link. For example

    <a class="about selected" title="About Inspiring Communities" href="/about-inspiring-communities.aspx">About Inspiring Communities</a

    The issue I am experiencing is that the current page selected class removes the link class. For example

    <a class="selected" title="About Inspiring Communities" href="/about-inspiring-communities.aspx">About Inspiring Communities</a>

    I can see why this is happening but cannot think of the code to have both the link and selected class. Below is the current code.

    <ul id="topnavigation">
    <xsl:for-each select="$currentPage/ancestor-or-self::* [@level = $level]/* [string(umbracoNaviHide) != '1' and @isDoc]">
    <li>
    <a href="{umbraco.library:NiceUrl(@id)}" class='{bodyClass}' title='{@nodeName}'>
    <xsl:if test="$currentPage/@id = current()/@id">
    <xsl:attribute name="class">selected</xsl:attribute>
    </xsl:if>
    <xsl:value-of select="@nodeName"/>
    </a>
    </li>
    </xsl:for-each>
    </ul>

    Any advice and support would be greatly appreciated.

  • Magnus Eriksson 122 posts 362 karma points
    Dec 09, 2010 @ 13:23
    Magnus Eriksson
    0

    What about doing this where you have the selected class?:

    <xsl:attribute name="class"><xsl:value-of select="bodyClass"/> selected</xsl:attribute>

    Regards,
    Magnus

  • Thomas Stock 40 posts 70 karma points
    Dec 09, 2010 @ 13:25
    Thomas Stock
    0

    untested but give it a try:

    <ul id="topnavigation">
       
    <xsl:for-each select="$currentPage/ancestor-or-self::* [@level = $level]/* [string(umbracoNaviHide) != '1' and @isDoc]">
           
    <li>
               
    <a href="{umbraco.library:NiceUrl(@id)}" class='{bodyClass}' title='{@nodeName}'>
                 
    <xsl:if test="$currentPage/@id = current()/@id">
                   
    <xsl:attribute name="class">
    <xsl:value-of select="{bodyClass}"/>
     selected
    </xsl:attribute>
                 
    </xsl:if>
                 
    <xsl:value-of select="@nodeName"/>
               
    </a>
           
    </li>
       
    </xsl:for-each>
    </ul>
  • Luke Johnson 61 posts 80 karma points
    Jun 27, 2011 @ 19:35
    Luke Johnson
    0

    This worked well for me. To make it work, I had to remove the curly brackets from {bodyClass} in <xsl:value-of>. Here is the full code:

    <?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" xmlns:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary ">

    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->
    <xsl:variable name="level" select="3"/>

    <xsl:template match="/">

    <!-- The fun starts here -->
    <h1><xsl:value-of select="$currentPage/../@nodeName" /></h1>
    <!-- this grabs the name of the parent folder -->

      
    <nav>
    <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '3']">
      <a href="{umbraco.library:NiceUrl(@id)}" class="{bodyClass}" title="{@nodeName}">
        
        <xsl:if test="$currentPage/@id = current()/@id">
          <xsl:attribute name="class">
                <xsl:value-of select="bodyClass"/>
                 selected
          </xsl:attribute>
        </xsl:if>
       
        <xsl:value-of select="@nodeName"/>
      </a>
    </xsl:for-each>
    </nav>
      
      
     
    </xsl:template>

    </xsl:stylesheet>
  • gustav 11 posts 53 karma points
    Dec 17, 2013 @ 11:30
    gustav
    0

    Hi

    im new to Umbraco so I would like som help with this.  This menu works fine, exept that I dont want the parent of the children to be displayed. Anyone that has some information on how to remove it?

    BR

Please Sign in or register to post replies

Write your reply to:

Draft