Active html link

tdp0001's Avatar

tdp0001

11 Feb, 2016 06:32 PM

I have a left hand menu system and I would like to highlight in yellow the page a user is currently on. It seems to me a CSS class must be added to the link of the current page. I will need to compare the current page being processed in the XSLT or Velocity script with the link in the menu system to know when to add the custom css class. How would you recommend accomplishing this?. I have attached a picture to illustrate.

  1. 1 Posted by Ryan Griffith on 11 Feb, 2016 06:53 PM

    Ryan Griffith's Avatar

    Hi,

    This is typically accomplished by looking to see if the folder (or page) has the current attribute assigned to it. If so, you can apply a specific class to your markup (i.e. <a> or <li> tag). The check for the current attribute is as simple as checking for the existence of @current:

    <xsl:template select="system-folder">
      <li><a href="${path/index}">
        <xsl:if test="@current">
          <xsl:attribute name="class">active</xsl:attribute>
        </xsl:if>
        ... process children ...
      </a></li>
    </xsl:template>
    

    Please let me know if you have any questions.

    Thanks!

  2. Support Staff 2 Posted by Tim on 26 Feb, 2016 09:58 PM

    Tim's Avatar

    Hi,

    Just wanted to make sure you saw Ryan's comment above. Let us know if you need more help.

    Thanks

  3. 3 Posted by tdp0001 on 29 Feb, 2016 01:51 PM

    tdp0001's Avatar

    All good here.

    Thanks,
    Tyler

  4. Tim closed this discussion on 29 Feb, 2016 02:35 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac