descendant navi breadcrumb

Fuji Kusaka 2203 posts 4220 karma points

May 07, 2011 @ 12:26

Hi guys,

Im having some issues with a sub Level menu navigation. Here is how my website is structured

Content

-Default

--Page 1

--- Sub Page 1

--- Sub Page 2

--- Sub Page 3

--- Sub Page 4

-- Page 2

--- Sub Page 1

--- Sub Page 2

My top Navigation is working just fine, but my one issue is when i go in Page 1, i want to display the links that is just a sub navigation so that user can just click instead of using the top menu navigation with drop downs hover effect.

So when am in Page 1, I should be able to see both the title Page 1 and Links to the Sub pages 1-4 which works fine but when i click on one of the Sub Pages, i cant see the links to the other Sub Pages.

e.g of how it should be displayed

When viewing Page 1

Page 1

--- Sub Page 1

--- Sub Page 2

--- Sub Page 3

--- Sub Page 4

When viewing Sub Page 2

Page 1

--- Sub Page 1

--- Sub Page 2 (being highlighted)

--- Sub Page 3

--- Sub Page 4

For this am using i want to use the same template for all the Pages that will contain sub pages. So i choice a breadcrumb, and using the "descendant" property. But cant get the other content since Sub Page doesnt have any desecendant.

<xsl:if test="$currentPage/@level &gt; $minLevel">
      <ul>
          <xsl:for-each select="$currentPage/descendant::*[@isDoc]">
           <li>
            <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:value-of select="@nodeName"/>
            </a>
          </li>
        </xsl:for-each>            
      </ul>
    </xsl:if>

Copy Link

Søren Tidmand 129 posts 366 karma points

May 08, 2011 @ 14:56

Hi Fuji,

You could use the following 2nd level navigation-standard:

<xsl:variable name="items" select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/* [@isDoc and string(umbracoNaviHide) != '1']"/>
  
<!-- The fun starts here -->
    
<xsl:if test="count($items) &gt; 0">
<ul>
<xsl:for-each select="$items">
  <li>
    <a>
      <xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl(@id)"/></xsl:attribute>
      <xsl:value-of select="@nodeName"/>
    </a>
  </li>
</xsl:for-each>
</ul>
</xsl:if>

First you declare the possible items as a variable - getting all subpages (which aren't hidden) from the current page (or ancestor on @level 2). If you want to include the actual page on level 2 you'll have to include that in the variable like this:

<xsl:variable name="items" select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/descendant-or-self::* [@isDoc and string(umbracoNaviHide) != '1']"/>

Now you get a list of all pages from level 2 (Page 1 included) and down.

If you'd like to include some high-lighting set a class with an if-statement and use css. In this example the class is placed on the <li> and named "current":

  <li>
    <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
      <xsl:attribute name="class">current</xsl:attribute>
    </xsl:if>
    <a>
      <xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl(@id)"/></xsl:attribute>
      <xsl:value-of select="@nodeName"/>
    </a>
  </li>

I hope this answers your needs.

Best regards,
Søren

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 08, 2011 @ 15:46

Thks Soren, i will try this out.

//fuji

Copy Link

Søren Tidmand 129 posts 366 karma points

May 08, 2011 @ 16:02

Hi Fuji,

Cool. Please let me know if it works.

//Søren

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 08, 2011 @ 16:11

Hi Soren,

Am tyring to get this working from home but cant get any access to my dev server at the office.... will surely give you an update.\

//fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 09, 2011 @ 11:55

Soren its working fine but i changed this piece of code since i only want the descendant to be current

<li>
    <xsl:if test="$currentPage/descendant-or-self::*/@id = current()/@id">
      <xsl:attribute name="class">current</xsl:attribute>
    </xsl:if>
    <a>
      <xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl(@id)"/></xsl:attribute>
      <xsl:value-of select="@nodeName"/>
    </a>
  </li>

The only thing is that when am on the ancestor node that is Page 1 it should be highlighted differently and even when am on the other Sub Pages the Hightlighthing for tle should remain the same.

//fuji

Copy Link

Søren Tidmand 129 posts 366 karma points

May 10, 2011 @ 00:01

Hi Fuji,

There are different ways of achieving what you're looking fore. If you need to separate the styling you could exclude the "ancestor" (Page 1) from the items selection and then include this page with a hard coded <li>:

<xsl:variable name="items" select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/* [@isDoc and string(umbracoNaviHide) != '1']"/>
  
<!-- The fun starts here -->
    
<ul>

  <!-- ANCESTOR -->
  <li id="ancestor">
    <xsl:if test="$currentPage/self::*/@id = current()/@id">
      <xsl:attribute name="class">current</xsl:attribute>
    </xsl:if>
    <a>
      <xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@id)"/></xsl:attribute>
      <xsl:value-of select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@nodeName"/>
    </a>
  </li>

<xsl:if test="count($items) &gt; 0">

<xsl:for-each select="$items">
  <li>
    <a>
      <xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl(@id)"/></xsl:attribute>
      <xsl:value-of select="@nodeName"/>
    </a>
  </li>
</xsl:for-each>

</xsl:if>

</ul>

In the code above I've inserted the ancestor and given it an id of "ancestor" (you might rename it to "section" or similar).
Now you can make a separate css styling for .current AND #ancestor.current

At the time I've moved the if-statement that is counting the items. Now you'll always get a list including the ancestor, and then if there are any subpages it will print out these as <li>'s without id.

As I said earlier there are certainly more ways to do it.

Best regards,
Søren

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 10, 2011 @ 14:31

Soren,

It Doesnt seem to work, and getting errrors from the XSLT itself.

//fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 10, 2011 @ 14:43

Soren,

I got it working but still i cant get any value when i insert this line

<xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@id)"/>

Copy Link

Søren Tidmand 129 posts 366 karma points

May 10, 2011 @ 15:37

Hi Fuji,

Hmm ... strange ... are you putting the above line inside the variable "href":

<a>
<xsl:variable name="href">
<xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@id)"/>
</xsl:variable>
<xsl:value-of select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@nodeName" />
</a>

------ OR WITHOUT THE VARIABLE ------

<a href="{umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@id)}"> LINK TEXT </a>

In the second option remember to insert the curly brackets ....

/Søren

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 10, 2011 @ 17:18

Nope still not working......am getting this error msg

System.OverflowException: Value was either too large or too small for an Int32.

Here is the piece of code am using in my XSLT


<xsl:variable name="items" select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/* [@isDoc and string(umbracoNaviHide) != '1']"/>

<xsl:template match="/">
<!-- The fun starts here -->
  
<ul class="subNav_inter">
  <!-- Root Node-->
  
  <li id="title_page">
    <xsl:if test="$currentPage/self::*/@id = current()/@id">
      <xsl:attribute name="class">tit</xsl:attribute>
    </xsl:if>
    <a>
      <xsl:attribute name="href"> <xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@id)"/></xsl:attribute>
     <xsl:value-of select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@nodeName"/>
    </a>
  </li>
<xsl:if test="count($items) &gt; 0">
<xsl:for-each select="$items">
  <li>
    <xsl:if test="$currentPage/self::*/@id = current()/@id">
      <xsl:attribute name="class">current</xsl:attribute>
    </xsl:if>
    <a>
      <xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl(@id)"/></xsl:attribute>
      <xsl:value-of select="@nodeName"/>
    </a>
  </li>
</xsl:for-each>
</xsl:if>
    
</ul>

However when i removed changed the <xsl:attribute> for the title</xsl:attribute>

from

<a>
      <xsl:attribute name="href"> <xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@id)"/></xsl:attribute>
     <xsl:value-of select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@nodeName"/>
    </a>

to

<a>
      <xsl:attribute name="href"> <xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::* [@isDoc and @level = 1]/@id)"/></xsl:attribute>
     <xsl:value-of select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@nodeName"/>
    </a>

It works returning me the right node Name but not the right node link. Instead its returning me to the root node.

//fuji

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

May 10, 2011 @ 21:47

Soren when i used this code

<a>
      <xsl:attribute name="href"> <xsl:value-of select="umbraco.library:NiceUrl($currentPage/ancestor-or-self::*/@id)"/></xsl:attribute>
     <xsl:value-of select="$currentPage/ancestor-or-self::* [@isDoc and @level = 2]/@nodeName"/>
    </a>