Copied to clipboard

Flag this post as spam?

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


  • Ben Price 15 posts 35 karma points
    Feb 09, 2011 @ 15:24
    Ben Price
    0

    Side Navigation based on current page

    I need to know how to make a side navigation pane that is based on the current page.  Along the top of my site is a drop down navigation, so if I go to the 'Products' page, then along the side, I would like to display the child objects for 'Products'. 

    Also, above the navigation, I would like the parent page's title, so along the side when on the 'Products' page or one of its children, it should look like

    Products

    Item Category 1

    Item Category 2

    Item Category 3

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Feb 09, 2011 @ 19:54
    Jan Skovgaard
    0

    Hi Ben

    I think you could benefit from the predefined "Sitemap" XSLT snippet in this case. When you create a XSLT file you can select it from the dropdown. You can specify the start leveld and the max level that should be included.

    This gives you the needed HTML output and then the rest is a matter of styling it using CSS and perhaps a bit of javascript if you want to spice up the effect.

    Hope this inputs helps you.

    /Jan

  • Ben Price 15 posts 35 karma points
    Feb 09, 2011 @ 22:17
    Ben Price
    0

    I am currently using the sitemap xslt for the top navigation.  The side navigation will obviously need to be on top of each other rather than beside, but I'm not aware of how to accomplish this.  Also, the start level in that template is static, but I need the navigation to be dynamic based on the current page, which I'm also unaware of how to do.  Further, the headline of the parent page being displayed at the top of the navigation needs to be dynamic, so how do I accomplish that?

  • Greyhound 102 posts 124 karma points
    Feb 10, 2011 @ 12:32
    Greyhound
    0

    Is this kind of menu system what you are looking for:

    http://www.potentio.co.uk/experience-potentio.aspx

    I built two controls for this - the top nav and side nav. Top nav is full of JQuery for various states (also has multiple sub categories so that the drop downs can contain columns)

    If these would be of any use I can take out all the styling and give you these as user controls. The page title should be easy enough to accomplish - your just looking to get the Page title (or other custom variable you may want to use) from the node ID. I'd treat that seperate to the navigation.

    If you're just looking for some CSS (...."The side navigation will obviously need to be on top of each other rather than beside") then I can post you the CSS code to create a list menu.

    Cheers,
    Ben

  • Ben Price 15 posts 35 karma points
    Feb 11, 2011 @ 07:49
    Ben Price
    0

    Ugh.  Didn't get an email notification about your response, sorry.  Yes, that is EXACTLY what I was going for.  I did it like this:

     

    <!DOCTYPE xsl:Stylesheet [
      <!ENTITY nbsp "&#x00A0;">
    ]>
    <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="xml" omit-xml-declaration="yes"/>
      <xsl:param name="currentPage"/>

      <xsl:variable name="CssClassName" select="/macro/CssClassName" />
      <xsl:variable name="CssId" select="/macro/CssId" />

      <xsl:variable name="StopLevel" select="/macro/StopLevel" />
      <xsl:variable name="StartLevel" select="/macro/StartLevel" />
      <xsl:variable name="ParentNodeId" select="/macro/ParentNodeId" />

      <xsl:template name="SubMenu">
        <xsl:if test="1 > 0">
          <li>
            <xsl:attribute name="class">

              <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                <xsl:text>selected </xsl:text>
              </xsl:if>

              <xsl:if test="position() = 1">
                <xsl:text>first </xsl:text>
              </xsl:if>

              <xsl:if test="position() = last()">
                <xsl:text>last</xsl:text>
              </xsl:if>
            </xsl:attribute>
            <xsl:choose>
              <xsl:when test="string-length(data[@alias='RedirectUrl']) > 0">
                <href="{data[@alias='RedirectUrl']}" title="{@nodeName}">
                  <xsl:value-of select="@nodeName"/>
                </a>
              </xsl:when>
              <xsl:when test="string-length(data[@alias='RedirectPageId']) > 0">
                <href="{umbraco.library:NiceUrl(data[@alias='RedirectPageId'])}" title="{@nodeName}">
                  <xsl:value-of select="@nodeName"/>
                </a>
              </xsl:when>
              <xsl:otherwise>
                <href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                  <xsl:value-of select="@nodeName"/>
                </a>
              </xsl:otherwise>
            </xsl:choose>


            <xsl:if test="current()/@level &lt; ($StopLevel) and $currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
              <xsl:if test="count(*[@isDoc][not(data[@alias='umbracoNaviHide']=1)]) > 0">
                <ul>
                  <xsl:for-each select="*[@isDoc][not(data[@alias='umbracoNaviHide']=1)]">
                    <xsl:sort select="@sortOrder" data-type="number" />
                    <xsl:call-template name="SubMenu"/>
                  </xsl:for-each>
                </ul>
              </xsl:if>
            </xsl:if>

          </li>
        </xsl:if>
      </xsl:template>


    </xsl:stylesheet>

Please Sign in or register to post replies

Write your reply to:

Draft