I need to create a sliding nav bar that slides down from the main navigation. I can do this easily with jquery sliding panels but the problem I have is to create some xslt that will display all nodes in vertical collumns.
For example if I have root nodes of Home | Products | News | Contact, I would like to display all subordinates of home in one collumn, subordinates of Products in the next collumn and so on. This would be accessible under the main nav via slider.
Is this possible and if so some code examples would be gratefully recieved?
Actually no not really. This is not a HTML issue but rather an XSLT method to look at all the nodes beginning at the top and working down displaying only the top three levels and organising them into a table with links.
The table would be basic (as derived from the image)
I'm asking because a table like that is actually a bit trickier to build - you can't build a table column by column, but have to go row by row. But all the data from Umbraco is really arranged in the columns you need... so using an unordered list would be much easier to build.
I'll be happy to give pointers for both approaches, though - it's of course possible, as everything is with Umbaco :-)
No problem. Just do something like this. I didn't try it out, but the idea is to navigate to the root, and render all child nodes (home, contact news etc).. Using mod you can make several rows.. For each row, the descendatns will be renderes.
Vertical Sitemap as part of a site nav
Hello,
I need to create a sliding nav bar that slides down from the main navigation. I can do this easily with jquery sliding panels but the problem I have is to create some xslt that will display all nodes in vertical collumns.
For example if I have root nodes of Home | Products | News | Contact, I would like to display all subordinates of home in one collumn, subordinates of Products in the next collumn and so on. This would be accessible under the main nav via slider.
Is this possible and if so some code examples would be gratefully recieved?
Thank you.
Hey,
Might be best if you post an image of your content structure and then post the HTML you are trying to replicate?
Rich
It would look like this and follows the site hierarchy...
Would need to check the flag "Hide in Navi" and only down to the third level IE --> Home, Heading --> Subordinate.
Any ideas in one script or will it have to be multiple scripts?
Thanks again.
Hi again,
Would be easier if you posted the HTML you are trying to generate (the html you are using for the menu above)
Rich
Hi Rich,
Actually no not really. This is not a HTML issue but rather an XSLT method to look at all the nodes beginning at the top and working down displaying only the top three levels and organising them into a table with links.
The table would be basic (as derived from the image)
<table>
<tr>
<td>Technology</td>
<td>News</td>
<td>Careers</td>
<td>Company</td>
</tr>
<tr>
<td>Technology Subordinate 1</td>
<td>News Subordinate 1</td>
<td><p>Careers Subordinate 1</p>
</td>
<td>Company Subordinate 1</td>
</tr>
<tr>
<td>Technology Subordinate 2</td>
<td>News Subordinate 2</td>
<td>Careers Subordinate 1</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>News Subordinate 3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>News Subordinate 4</td>
<td> </td>
<td> </td>
</tr>
</table>
Hi Streety,
Any specific reason for using a table for this?
I'm asking because a table like that is actually a bit trickier to build - you can't build a table column by column, but have to go row by row. But all the data from Umbraco is really arranged in the columns you need... so using an unordered list would be much easier to build.
I'll be happy to give pointers for both approaches, though - it's of course possible, as everything is with Umbaco :-)
/Chriztian
No problem. Just do something like this. I didn't try it out, but the idea is to navigate to the root, and render all child nodes (home, contact news etc).. Using mod you can make several rows.. For each row, the descendatns will be renderes.
<xsl:for-each select="$currentPage/ancestor-or-self::*[@level=1]/*[@isDoc]>
<li class="grid-two">
<xsl:if test="position() mod 4 != 1">
<xsl:attribute name="class">
grid-two grid-first
xsl:attribute>
xsl:if>
<xsl:value-of select="@nodeName"/>
<xsl:for-each select="./descendant::*[@isDoc]">
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
a>
xsl:for-each>
HI Chriztian
Yes you are right, I was thinking about this last night. the code would resemble more like this:
<table>
<tr>
<td>XSLT Script</td>
<td>XSLT Script</td>
<td>XSLT Script</td>
<td>XSLT Script</td>
</tr>
</table>
Any ideas how to code this?
is working on a reply...