i want to create an expandable tree that mimics navigation in umbraco backend content. I installed the cog navigation but have no luck to see that the tree is always expanded and shown in menu. Is there anyway for me to display tree based navigation structure by using XSLT.
Have try using user control approach and Document classes but have no luck to see it works in my case...
Just use XSLT to ouput the full nested list of navigation (perhaps the 'sitemap' XSLT template might be a good place to start) then use javascript to format it into a tree-type menu. I'ved used this one, which is based on jQuery with success in the past: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/.
<!-- Input the documenttype you want here --> <!-- Typically '1' for topnavigtaion and '2' for
2nd level --> <!-- Use div
elements around this macro combined with css --> <!-- for styling the navigation --> <xsl:variable
name="level" select="1"/>
<xsl:template
match="/"> <xsl:apply-templates
select="$currentPage/ancestor-or-self::*
[@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) !=
'1']"/> </xsl:template> <xsl:template match="*">
Thanks for your reply Bo, I had self worked out how to remove the counter amount of pages ;-)
With the hyphen, adding it to the line suggested means that all top level nodes also have a hyphen appear. I hoped to have a hyphen appear only on the sub nodes. So far instance i have 6 top level nodes, by selecting one of these 6 top level nodes, the menu will then show the sub nodes underneath each with a hyphen. Any further guidance would be much appreciated.
Using the above selecting SOMEPAGENAME4 is the current page being viewed this results in <li class="current"> kikcing in due to it being the current page together with <li class="current"> also in effect on SOMEPAGENAME4 top level node (SOMEPAGENAME3)
creating an expandable tree using XSLT
Dear All,
i want to create an expandable tree that mimics navigation in umbraco backend content. I installed the cog navigation but have no luck to see that the tree is always expanded and shown in menu. Is there anyway for me to display tree based navigation structure by using XSLT.
Have try using user control approach and Document classes but have no luck to see it works in my case...
any help will be apreciated :)
Just use XSLT to ouput the full nested list of navigation (perhaps the 'sitemap' XSLT template might be a good place to start) then use javascript to format it into a tree-type menu. I'ved used this one, which is based on jQuery with success in the past: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/.
Dear Dan,
any sample integration between two of them ? (i mean xslt and js)
Thanks
Hi
I have this working XSLT for the new schema
i apply some jquery afterwards.
this version is expanded from the current page.
all you need to do is remove th <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) > 0"> part of the xslt.
<?xml version="1.0" encoding="UTF-8"?>
<!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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:param name="currentPage"/>
<!-- Input the documenttype you want here -->
<!-- Typically '1' for topnavigtaion and '2' for 2nd level -->
<!-- Use div elements around this macro combined with css -->
<!-- for styling the navigation -->
<xsl:variable name="level" select="1"/>
<xsl:template match="/">
<xsl:apply-templates select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']"/>
</xsl:template>
<xsl:template match="*">
<xsl:if test="umbraco.library:HasAccess(@id, @path) = true()">
<li>
<a title="{nodeName}">
<xsl:attribute name="href">
<xsl:value-of select="umbraco.library:NiceUrl(@id)" />
</xsl:attribute>
<xsl:attribute name="class">level<xsl:value-of select="@level" />
<xsl:if test="position() = 1"><xsl:text> first</xsl:text></xsl:if>
<xsl:if test="position() = last()"><xsl:text> </xsl:text>last</xsl:if>
<xsl:if test="$currentPage/ancestor::*/@id = current()/@id"><xsl:text> </xsl:text>expanded</xsl:if>
<xsl:if test="@id = $currentPage/@id"><xsl:text> </xsl:text>current</xsl:if>
<xsl:if test="count(./*[string(umbracoNaviHide) != '1']) > 0"><xsl:text> </xsl:text>parent</xsl:if>
</xsl:attribute>
<span>
<xsl:value-of select="umbraco.library:Item(@id, 'pageName')"/> <xsl:if test="count(./*[@isDoc]) > 0"> <span class="subcount"> (<xsl:value-of select="count(./*[@isDoc])" />)</span></xsl:if>
</span>
</a>
<xsl:if test="count(./*[string(umbracoNaviHide) != '1']) > 0">
<xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
<ul>
<xsl:apply-templates select="./*[@isDoc and string(umbracoNaviHide) != '1']" />
</ul>
</xsl:if>
</xsl:if>
</li>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
Thanks petersen look great!
You're very welcome. :-)
Hey guys, have implemented the above menu and its great just what i needed. Only thing i hoped to solve is:-
Home
-Some MENU Item
Hey Matthew.
Find this line
<xsl:if test="count(./*[@isDoc]) > 0"> <span class="subcount"> (<xsl:value-ofselect="count(./*[@isDoc])" />)</span></xsl:if>
delete it or do what i do .
add
.subcount {display:none;}
to your css file.
about the hypen
locate this line and add the hyphen prefixed to this
<xsl:value-of select="umbraco.library:Item(@id, 'pageName')"/>
:)
Thanks for your reply Bo, I had self worked out how to remove the counter amount of pages ;-)
With the hyphen, adding it to the line suggested means that all top level nodes also have a hyphen appear. I hoped to have a hyphen appear only on the sub nodes. So far instance i have 6 top level nodes, by selecting one of these 6 top level nodes, the menu will then show the sub nodes underneath each with a hyphen. Any further guidance would be much appreciated.
The code below is the HTML that was created by a designer:-
<ul>
<li><a href="#">SOMEPAGENAME1</a></li>
<li><a href="#">SOMEPAGENAME2</a></li>
<li class="current"><a href="#">SOMEPAGENAME3</a>
<ul>
<li class="current"><a href="#">- SOMEPAGENAME4</a></li>
<li ><a href="#">- SOMEPAGENAME5</a></li>
<li ><a href="#">- SOMEPAGENAME6</a></li>
</ul>
</ul>
Using the above selecting SOMEPAGENAME4 is the current page being viewed this results in <li class="current"> kikcing in due to it being the current page together with <li class="current"> also in effect on SOMEPAGENAME4 top level node (SOMEPAGENAME3)
is working on a reply...