Copied to clipboard

Flag this post as spam?

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


  • Streety 358 posts 568 karma points
    Jan 05, 2011 @ 17:12
    Streety
    0

    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. 

  • Rich Green 2246 posts 4008 karma points
    Jan 05, 2011 @ 17:18
    Rich Green
    0

    Hey,

    Might be best if you post an image of your content structure and then post the HTML you are trying to replicate?

    Rich

  • Streety 358 posts 568 karma points
    Jan 05, 2011 @ 17:44
    Streety
    0

    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.

  • Rich Green 2246 posts 4008 karma points
    Jan 05, 2011 @ 17:50
    Rich Green
    0

    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

  • Streety 358 posts 568 karma points
    Jan 05, 2011 @ 18:15
    Streety
    0

    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>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>News Subordinate 3</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>News Subordinate 4</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Jan 05, 2011 @ 21:34
    Chriztian Steinmeier
    0

    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

  • Johan Roug 97 posts 153 karma points
    Jan 06, 2011 @ 00:10
    Johan Roug
    0

    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]">
                    <href="{umbraco.library:NiceUrl(@id)}">
                        <xsl:value-of select="@nodeName"/>
                    a>
                xsl:for-each>

  • Streety 358 posts 568 karma points
    Jan 06, 2011 @ 10:28
    Streety
    0

    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?

     

Please Sign in or register to post replies

Write your reply to:

Draft