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
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.
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?
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.
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
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
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?
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
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 " ">
]>
<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">
<a href="{data[@alias='RedirectUrl']}" title="{@nodeName}">
<xsl:value-of select="@nodeName"/>
</a>
</xsl:when>
<xsl:when test="string-length(data[@alias='RedirectPageId']) > 0">
<a href="{umbraco.library:NiceUrl(data[@alias='RedirectPageId'])}" title="{@nodeName}">
<xsl:value-of select="@nodeName"/>
</a>
</xsl:when>
<xsl:otherwise>
<a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
<xsl:value-of select="@nodeName"/>
</a>
</xsl:otherwise>
</xsl:choose>
<xsl:if test="current()/@level < ($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>
is working on a reply...