Hi, Im pretty new to xslt. Im trying to use it to create the main navigation along the top of my site. The navigation bar uses Jquery. It displays all of the nodes under the homepage node and then when you hover over one of these links a drop down menu appears beneath it with all of the child nodes for that page. Pretty common navigation bar.
My problem is I cant get XSLT to recognise the child nodes as a separate UL list under the top level nodes. Currently Its putting the 2nd node in the top level underneath the 1st node of the top level as oppose to the child nodes displaying underneath each of the parent nodes in the top level.
Sorry if thats confusing, finding it difficult to explain, my xslt code is below:
You should create a new xslt file and select the "sitemap" template - it should get you much closer to where you want to be. If you'd rather write it yourself, you need to look at a recursive template, but the sitemap xslt file will help you get your head around what is happening.
Hmm. Without seeing your site it's hard to see what is going wrong here, but starting with an install of something like http://our.umbraco.org/projects/business-website-starter-pack will allow you to see code that solves problems you are likely to encounter.
There doesn't seem to be much of anything wrong with your xslt (quick glance). Is the submenu rendered on all pages? Or is only the dropdown code not operating ont he subpages? i.e. if you go to a subpage and disable css can you see the menu with subpages included?
Navigation Menu with Drop Down
Hi, Im pretty new to xslt. Im trying to use it to create the main navigation along the top of my site. The navigation bar uses Jquery. It displays all of the nodes under the homepage node and then when you hover over one of these links a drop down menu appears beneath it with all of the child nodes for that page. Pretty common navigation bar.
My problem is I cant get XSLT to recognise the child nodes as a separate UL list under the top level nodes. Currently Its putting the 2nd node in the top level underneath the 1st node of the top level as oppose to the child nodes displaying underneath each of the parent nodes in the top level.
Sorry if thats confusing, finding it difficult to explain, my xslt code is below:
-----------------------------------------------------------------------------------------------------------------------
<?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"/>
<xsl:variable name="level" select="1"/>
<xsl:variable name="level2" select="2"/>
<xsl:variable name="lcletters">abcdefghijklmnopqrstuvwxyz</xsl:variable>
<xsl:variable name="ucletters">ABCDEFGHIJKLMNOPQRSTUVWXYZ</xsl:variable>
<xsl:template match="/">
<!-- The fun starts here -->
<div id="top-nav">
<ul id="menu">
<li>
<a href="/index.html">HOME <span class="breaker">|</span>
</a>
</li>
<xsl:for-each select="$currentPage/ancestor-or-self::node[@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::node [@level=$level2]/node [string(data [@alias='umbracoNaviHide']) != '1']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</li>
</xsl:for-each>
</ul>
</div>
</xsl:template>
</xsl:stylesheet>
-------------------------------------------------------------------------------------------------------------
You should create a new xslt file and select the "sitemap" template - it should get you much closer to where you want to be. If you'd rather write it yourself, you need to look at a recursive template, but the sitemap xslt file will help you get your head around what is happening.
Dan
Thanks Dan,
Your suggestion is pretty much working apart from the drop down is only working on the homepage. Any thoughts to why this might be the case??
sorry if this is something really dumb, like i said, im new to 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"/>
<!-- update this variable on how deep your site map should be -->
<xsl:variable name="maxLevelForSitemap" select="4"/>
<xsl:template match="/">
<div id="top-nav">
<div id="premenu">
<a href="/">
HOME</a>
</div>
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="$currentPage/ancestor-or-self::node [@level=1]"/>
</xsl:call-template>
</div>
</xsl:template>
<xsl:template name="drawNodes">
<xsl:param name="parent"/>
<xsl:if test="umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or (umbraco.library:IsProtected($parent/@id, $parent/@path) = 1 and umbraco.library:IsLoggedOn() = 1)">
<ul id="menu">
<xsl:for-each select="$parent/node [string(./data [@alias='umbracoNaviHide']) != '1' and @level <= $maxLevelForSitemap]">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/></a>
<xsl:if test="count(./node [string(./data [@alias='umbracoNaviHide']) != '1' and @level <= $maxLevelForSitemap]) > 0">
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="."/>
</xsl:call-template>
</xsl:if>
</li>
</xsl:for-each>
</ul>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
Can anyone help. I've tried all sorts but cant work this out.
Is the macro placed on all templates, or just on the homepage?
Dan
its on all templates.
Hmm. Without seeing your site it's hard to see what is going wrong here, but starting with an install of something like http://our.umbraco.org/projects/business-website-starter-pack will allow you to see code that solves problems you are likely to encounter.
There doesn't seem to be much of anything wrong with your xslt (quick glance). Is the submenu rendered on all pages? Or is only the dropdown code not operating ont he subpages? i.e. if you go to a subpage and disable css can you see the menu with subpages included?
So in short
homepage - working correctly
nodes under homepage - shows just the first level nodes but the drop down with the 2nd level nodes isnt showing
next level of nodes - same again, shows just the first level nodes but the drop down with the 2nd level nodes isnt showing
it does seem to be a css issue. when i turn off srtyling the links are there!
Are the paths to your css etc working ok? i.e. using absolute paths
Dan
is working on a reply...