Copied to clipboard

Flag this post as spam?

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


  • jonok 297 posts 658 karma points
    Jul 07, 2009 @ 22:54
    jonok
    0

    Top navigation nested under multiple sites

    Hi, I have set up the following structure in Umbraco, but I am having trouble working out the correct xslt for it:

    Content
    -Site1
    --FirstPage
    ---UnderFirstPage1
    ---UnderFirstPage2
    ---UnderFirstPage3
    --SecondPage
    ---UnderSecondPage1
    ---UnderSecondPage2
    --Etc
    -Site2
    --AnotherPage
    ---UnderAnotherPage1
    --NextPage
    ---UnderNextPage1
    --Etc

    The nodes Site1 & Site2 are basically the home pages for each site, so when the top navigation is rendered within each site I want this structure (eg this is the menu for Site1):

    <ul>
    <li>Home(Site1)</li>
    <li>FirstPage
        <ul><li>UnderFirstPage1</li><li>UnderFirstPage2</li><li>UnderFirstPage3</li></ul>
    </li>
    <li>SecondPage
        <ul><li>UnderSecondPage1</li><li>UnderSecondPage2</li></ul>
    </li>
    </ul>

    I have been experimenting with the runway topnavigation.xslt and modifying it using info that I've seen on these forums but I'm new to xslt and its really confusing me. Has anyone using Umbraco done something similar to this before or could anybody point me in the right direction?

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 07, 2009 @ 23:04
    Jan Skovgaard
    0

    Hmm I am thinking that you should be able to modify the XSLT navigation from the runway module. I am guessing you don't want the hover-effect but just want to display the menu structure at once?

    Unfortunately I cannot access the runway module at my umbraco installation at the moment but I think that what you are looking for should be easy to achieve by making a few changes in the runway XSLT.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 07, 2009 @ 23:23
    Jan Skovgaard
    0

    Now I had luck accessing the module.

    If you have chosen to install the "Dropdown navigation" module for Runway I think you get what you are looking for.

    As mentioned above if you don't want the dropdown effec you should just remove the jquery stuff and then you can do the styling as you want to.

    You should just remove or uncomment these lines of code in the XSLT - This removes the jquery stuff that creates the dropdown effect.

    <xsl:value-of select="umbraco.library:AddJquery()"/>
    <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('droppyJs', '/scripts/droppy.js')"/>
    <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('droppyCss', '/css/dropdownnavigation.css')"/>

    <xsl:variable name="droppyJS">$(function() {$('#dropdownNavigation').droppy();});</xsl:variable>

    <xsl:value-of select="umbraco.library:RegisterClientScriptBlock('droppyJs', $droppyJS, true())"/>

     

    Is this what you are looking for?

  • jonok 297 posts 658 karma points
    Jul 07, 2009 @ 23:24
    jonok
    1

    Thanks for the quick reply Jan - I went back to my code and had a bit more of a look at it and I think I just solved my problem. Here is the xslt that I've come up with. Probably not the most elegant solution but it seems to do the job:

    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:umbraco.library="urn:umbraco.library"
        exclude-result-prefixes="msxml umbraco.library">

        <xsl:output method="html"/>
        <xsl:param name="currentPage"/>

        <xsl:template match="/">
            <div id="nav">
                <ul>
                    <xsl:variable name="startNode" select="$currentPage/ancestor-or-self::node [@level='1']"/>
                    <xsl:for-each select="$startNode">
                      <li>
                            <a href="{umbraco.library:NiceUrl(@id)}">
                                <xsl:if test="$currentPage/@id = current()/@id">
                                    <!-- we're under the item - you can do your own styling here -->
                                    <xsl:attribute name="style">font-weight: bold;</xsl:attribute>
                                </xsl:if>
                                Home
                            </a>
                     </li>
                    </xsl:for-each>
                    <xsl:call-template name="FirstLevelNodes">
                        <xsl:with-param name="parent" select="$startNode"/>
                    </xsl:call-template>
                </ul>
            </div>
        </xsl:template>


        <xsl:template name="FirstLevelNodes">
            <xsl:param name="parent"/>
                <xsl:for-each select="$parent/node[string(data [@alias='umbracoNaviHide']) != '1']">
                    <li>
                        <a href="{umbraco.library:NiceUrl(@id)}">
                            <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
                                <!-- we're under the item - you can do your own styling here -->
                                <xsl:attribute name="style">font-weight: bold;</xsl:attribute>
                            </xsl:if>
                            <xsl:value-of select="@nodeName"/>
                        </a>
                        <xsl:call-template name="SecondLevelNodes">
                            <xsl:with-param name="parent" select="."/>
                        </xsl:call-template>
                    </li>
                </xsl:for-each>
        </xsl:template>


        <xsl:template name="SecondLevelNodes">
            <xsl:param name="parent"/>
            <xsl:if test="count($parent/node) > 0">
                <ul>
                    <xsl:for-each select="$parent/node[string(data [@alias='umbracoNaviHide']) != '1']">
                        <li>
                        <a href="{umbraco.library:NiceUrl(@id)}">
                            <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id">
                            <!-- we're under the item - you can do your own styling here -->
                            <xsl:attribute name="style">font-weight: bold;</xsl:attribute>
                            </xsl:if>
                            <xsl:value-of select="@nodeName"/>
                        </a>
                        </li>
                    </xsl:for-each>
                </ul>
            </xsl:if>

        </xsl:template>


    </xsl:stylesheet>

     

     

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jul 08, 2009 @ 10:03
    Jan Skovgaard
    0

    If your issue has been fixed could you then please mark that the topic has been solved?

  • Alec Colebrook-Clark 134 posts 258 karma points
    Jul 08, 2009 @ 12:37
    Alec Colebrook-Clark
    100

    I found your solution Ideal, perfect for what i was wanting to accomplish, Thank you very much!

     

    Alec

Please Sign in or register to post replies

Write your reply to:

Draft