Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Philip 13 posts 33 karma points
    Nov 24, 2010 @ 18:14
    Philip
    0

    Creating a 'selected' state on a sub-navigation bar

    Hi,

    I'm trying to figure out the best way of implementing a 'selected' state on my sub-navigation bar (and hopefully the main navigation afterwards). This is the code I'm working with, but I'm hoping to alter the appearance of the selected page on the sub-navigation bar. Could anybody point me in the right direction? 

    Thanks for any help,

    Philip

    Code:

       <ul id="subNavHolder">

          <xsl:choose>

            <xsl:when test="$currentPage/@nodeName = 'Homepage'">

              <li>

                <a  href="/products/page1.aspx"> PAGE 1</a>

              </li>

              <li>

                <a  href="/products/page2.aspx">PAGE 2</a>

              </li>  

             <li>

                <a  href="/products/page3.aspx">PAGE 3</a>

              </li>  

              <li>

                <a  href="/products/page4.aspx">PAGE 4</a>

              </li>

            </xsl:when>

            <xsl:when test="$currentPage/@nodeName = 'NEWS'"></xsl:when>

            <xsl:otherwise>   

               <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [ @isDoc and string(@id) != '2144' and name($currentPage) != 'newsArticle' and name($currentPage) != 'Competition']">  

                    <li>       

                      <a href="{umbraco.library:NiceUrl(@id)}">

                        <xsl:value-of select="translate(@nodeName, $smallcase, $uppercase)"/>

                      </a>                

                    </li>            

              </xsl:for-each>      

            </xsl:otherwise>

          </xsl:choose>

        </ul>

     

    Copy Link
  • Kim Andersen 1447 posts 2197 karma points MVP
    Nov 24, 2010 @ 22:36
    Kim Andersen
    0

    Hi Philip

    I guess that you want to put a class on your <li> or <a> if the page or one of it's children is the current page. Am I right?

    If that's the case, I'm prety sure that you can extend your for-each to something like this:

    <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [ @isDoc and string(@id) != '2144' and name($currentPage) != 'newsArticle' and name($currentPage) != 'Competition']">  
       <li>    
            <xsl:if test="$currentPage/ancestor-or-self::*[@id = current()/@id]">
                       <xsl:attribute name="class">selected</xsl:attribute>
                      </xsl:if>
       
                    <a href="{umbraco.library:NiceUrl(@id)}">
                     <xsl:value-of select="translate(@nodeName, $smallcase, $uppercase)"/>
                    </a>                
       </li>            
    </xsl:for-each>

    This should put a class called selected on the <li>-element if the current page is the same as the clicked menu item.

    /Kim A

    Copy Link
  • Philip 13 posts 33 karma points
    Nov 25, 2010 @ 12:00
    Philip
    0

    Perfect, thanks Kim!

    Copy Link
  • Kim Andersen 1447 posts 2197 karma points MVP
    Nov 25, 2010 @ 16:44
    Kim Andersen
    0

    You are very welcome Philip!

    /Kim A

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies