navigation current state on parent node

Niels 63 posts 119 karma points

Sep 26, 2011 @ 14:52

Navigation: Current state on parent node

I have tried to google it and searched it on the forum, but i can't find a solution for the following problem:

I want to have a current state (class) on a parent node item in a navigation when a childnode is selected. I've tried it with the following code, but no succes.

<xsl:variable name="source" select="/macro/source"/>
  
<xsl:template match="/">
          
<ul class="topnav">
   <xsl:for-each select="umbraco.library:GetXmlNodeById($source)/* [@isDoc and string(umbracoNaviHide) != '1']">
      <li>
         <xsl:if test="@id = $currentPage/@id">
            <xsl:attribute name="class">current</xsl:attribute>
         </xsl:if>
         <xsl:if test="$currentPage/ancestor::* [@level=3]">
            <xsl:attribute name="class">current</xsl:attribute>
         </xsl:if>
         <a href="{umbraco.library:NiceUrl(@id)}" class="producttype">
            <xsl:value-of select="@nodeName"/>
         </a>
         <xsl:if test="count(./child::*[@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
            <ul class="subnav">
               <xsl:for-each select="./child::*[@isDoc and string(umbracoNaviHide) != '1']">
                  <li>
                     <a href="{umbraco.library:NiceUrl(@id)}">
                        <xsl:value-of select="@nodeName"/> ›
                     </a>
                  </li>
               </xsl:for-each>
            </ul>  
         </xsl:if>
      </li>
   </xsl:for-each>
</ul>

The navigation is 3 nodes deep with a drop down menu so I want to have the current state(class) on the highest node in the navigation. Can somebody help me on this one? Thank you.

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Sep 26, 2011 @ 15:14

Hi Niels,

You could try chaging this

<xsl:variablename="source"select="/macro/source"/>
  
<xsl:templatematch="/">
          
<ulclass="topnav">
   <xsl:for-eachselect="umbraco.library:GetXmlNodeById($source)/* [@isDoc and string(umbracoNaviHide) != '1']">
      <li>
         <xsl:iftest="@id = $currentPage/@id">
            <xsl:attributename="class">current</xsl:attribute>
         </xsl:if>
         <xsl:iftest="$currentPage/ancestor::* [@level=3]">
            <xsl:attributename="class">current</xsl:attribute>
         </xsl:if>
         <ahref="{umbraco.library:NiceUrl(@id)}"class="producttype">
            <xsl:value-ofselect="@nodeName"/>
         </a>
         <xsl:iftest="count(./child::*[@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
            <ulclass="subnav">
               <xsl:for-eachselect="./child::*[@isDoc and string(umbracoNaviHide) != '1']">
                  <li>
                     <ahref="{umbraco.library:NiceUrl(@id)}">
                        <xsl:value-ofselect="@nodeName"/>›
                     </a>
                  </li>
               </xsl:for-each>
            </ul>  
         </xsl:if>
      </li>
   </xsl:for-each>
</ul>

to this

<xsl:variablename="source"select="/macro/source"/>
  
<xsl:templatematch="/">
          
<ulclass="topnav">
   <xsl:for-eachselect="umbraco.library:GetXmlNodeById($source)/* [@isDoc and string(umbracoNaviHide) != '1']">
      <li>
        <xsl:attribute name="class">                    
          <xsl:if test="$currentPage/@id = current()/@id">
               <xsl:text> current</xsl:text>
          </xsl:if>
        </xsl:attribute> 
         <ahref="{umbraco.library:NiceUrl(@id)}"class="producttype">
            <xsl:value-ofselect="@nodeName"/>
         </a>
         <xsl:iftest="count(./child::*[@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
            <ulclass="subnav">
               <xsl:for-eachselect="./child::*[@isDoc and string(umbracoNaviHide) != '1']">
                  <li>
                     <ahref="{umbraco.library:NiceUrl(@id)}">
                        <xsl:value-ofselect="@nodeName"/>›
                     </a>
                  </li>
               </xsl:for-each>
            </ul>  
         </xsl:if>
      </li>
   </xsl:for-each>
</ul>

//fuji

Copy Link

Niels 63 posts 119 karma points

Sep 26, 2011 @ 15:29

Fuji,

That doesn't do the trick, the change you've made is only effecting the current page. So when "item 1" is selected the current class is showing (that's good), but I want the current state is also showing when a child of "item 1" is active/selected.

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Sep 26, 2011 @ 15:41

Oh ok i see, from what you mentioned earlier you have a dropdown menu right? So when you click on any of the items displayed in the dropDown menu you want this item to have a current class as well??

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Sep 26, 2011 @ 15:52

Niels what happens when you do this

<xsl:variablename="source"select="/macro/source"/>
  
<xsl:templatematch="/">
          
<ulclass="topnav">
   <xsl:for-eachselect="umbraco.library:GetXmlNodeById($source)/* [@isDoc and string(umbracoNaviHide) != '1']">
      <li>
        <xsl:attributename="class">                    
          <xsl:iftest="$currentPage/@id = current()/@id">
               <xsl:text>current</xsl:text>
          </xsl:if>
        </xsl:attribute>
         <ahref="{umbraco.library:NiceUrl(@id)}"class="producttype">
            <xsl:value-ofselect="@nodeName"/>
         </a>
         <xsl:iftest="count(./child::*[@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
            <ulclass="subnav">
               <xsl:for-eachselect="./child::*[@isDoc and string(umbracoNaviHide) != '1']">
                  <li>
               <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                    <xsl:attribute name="class">current</xsl:attribute>
                 </xsl:if>
                     <ahref="{umbraco.library:NiceUrl(@id)}">
                        <xsl:value-ofselect="@nodeName"/>›
                     </a>
                  </li>
               </xsl:for-each>
            </ul>  
         </xsl:if>
      </li>
   </xsl:for-each>
</ul>

Copy Link

Niels 63 posts 119 karma points

Sep 26, 2011 @ 16:08

The menu is a jquery dropdown menu, so when I rollover, the childs appear. When I click a childnode from the dropdown, the parent node must get the current state. So you can see under which categorie the child is selected/placed.

Copy Link

Johan Möller 83 posts 137 karma points

Sep 26, 2011 @ 16:57

If i have understood you correctly this shoud work.

  <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
  <xsl:attribute name="class">selected</xsl:attribute>
  </xsl:if>

put it under the li tag you want to put the class on.

Copy Link

Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib

Sep 26, 2011 @ 17:00

Hi Niels,

Change the first test (@id = $currentPage/@id) to this, and you'll get your "current" class applied if the selected page is below (or the same as) the one being rendered:

<xsl:if test="descendant-or-self::*[@id = $currentPage/@id]">

/Chriztian

Copy Link

Niels 63 posts 119 karma points

Sep 27, 2011 @ 12:38

Hi Chriztian,

I was blinded by code but my eyes are open now ;-) Thank you for this simple but perfect solution!

Niels

Copy Link

Stephen Davidson 216 posts 392 karma points

Dec 11, 2012 @ 15:07

thanks from me to...just what i was looking for!

S

Copy Link

is working on a reply...

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.

Flag this post as spam?

Navigation: Current state on parent node