Hi,
I have a problem with a drop down xslt menu. The end of the menu doesn't stay on the top level. I am using Umbraco 4 with .net 2.0 on windows xp.
The site stucture is the following:
Home
Services
subservice 1
subservice 2
subservice 3
Projects
subproject 1
subproject 2
subproject 3
The team
News
Contact Us
After the projects page link, all of the remaining elements whether they are supposed to be on the first level or the second level all appear in the sub menu of projects. I have played around with the code but can't seem to find the solution.
I have even tried installing different menu packages such as Bob Baty-Barr's Ultimate Nav package (packages.maliciousthinktank.com/navdemo.aspx), but it seems to have a similar problem. I don't think it could be an html or css styling problem, as the macro is all inside one div. I have attached the output from firebug at the end of my post, which shows that the last few items in the menu are treated as submenu items, but firstly here is the code from the xslt.. Any help would be appreciated:
<?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" exclude-result-prefixes="msxml umbraco.library"> <xsl:output method="xml" omit-xml-declaration="yes" /> <xsl:param name="currentPage"/> <xsl:variable name="level" select="1"/> <xsl:template match="/"> <script type="text/javascript"> <xsl:text disable-output-escaping="yes"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav") for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></xsl:text> </script> <xsl:call-template name="printListe"> <xsl:with-param name="node" select="$currentPage/ancestor-or-self::node [@level = 1]"/> <xsl:with-param name="id" select="string('nav')"/> </xsl:call-template> </xsl:template> <xsl:template name="printListe"> <xsl:param name="node"/> <xsl:param name="id"/> <ul id="naviList"> <xsl:if test="$id != ''"> <xsl:attribute name="id"><xsl:value-of select="$id"/></xsl:attribute> <li><a href="/">Home</a></li> </xsl:if> <xsl:for-each select="$node/node [string(data [@alias='umbracoNaviHide']) != '1'] "> <li> <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id"> </xsl:if> <a href="{umbraco.library:NiceUrl(@id)}"><div><xsl:value-of select="@nodeName"/> </div> </a> <xsl:if test="count(./node) > 0"> <xsl:call-template name="printListe"> <xsl:with-param name="node" select="."/> </xsl:call-template> </xsl:if> </li> </xsl:for-each> </ul> </xsl:template> </xsl:stylesheet>
<?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" exclude-result-prefixes="msxml umbraco.library"> <xsl:output method="xml" omit-xml-declaration="yes" /> <xsl:param name="currentPage"/> <xsl:variable name="level" select="1"/> <xsl:template match="/"> <script type="text/javascript"> <xsl:text disable-output-escaping="yes"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav") for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></xsl:text> </script> <xsl:call-template name="printListe"> <xsl:with-param name="node" select="$currentPage/ancestor-or-self::node [@level = 1]"/> <xsl:with-param name="id" select="string('nav')"/> </xsl:call-template> </xsl:template> <xsl:template name="printListe"> <xsl:param name="node"/> <xsl:param name="id"/> <ul id="naviList"> <xsl:if test="$id != ''"> <xsl:attribute name="id"><xsl:value-of select="$id"/></xsl:attribute> <li><a href="/">Home</a></li> </xsl:if> <xsl:for-each select="$node/node [string(data [@alias='umbracoNaviHide']) != '1'] "> <li> <xsl:if test="$currentPage/ancestor-or-self::node/@id = current()/@id"> </xsl:if> <a href="{umbraco.library:NiceUrl(@id)}"><div><xsl:value-of select="@nodeName"/> </div> </a> <xsl:if test="count(./node) > 0"> <xsl:call-template name="printListe"> <xsl:with-param name="node" select="."/> </xsl:call-template> </xsl:if> </li> </xsl:for-each> </ul> </xsl:template> </xsl:stylesheet>
And here is the output from firebug: <div id="menucontent"> <script type="text/javascript"> 1<!--//--><![CDATA[//><!-- 2 3startList = function() { 4 if (document.all&&document.getElementById) { 5 navRoot = document.getElementById("nav") 6 for (i=0; i<navRoot.childNodes.length; i++) { 7 node = navRoot.childNodes[i]; 8 if (node.nodeName=="LI") { 9 node.onmouseover=function() { 10 this.className+=" over"; 11 } 12 node.onmouseout=function() { 13 this.className=this.className.replace(" over", 14 15""); 16 } 17 } 18 } 19 } 20} 21window.onload=startList; 22 23//--><!]]> </script> <ul id="nav"> <li> <a href="/">Home</a> </li> <li> <a href="/services.aspx"> <div>Services</div> </a> <ul id="naviList"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </li> <li> <a href="/projects.aspx"> <div>Projects</div> </a> <ul id="naviList"> <li> <a href="/projects/commercial.aspx"> <div>Commercial</div> </a> <ul id="naviList"> <li> <a href="/projects/education.aspx"> <div>Education</div> </a> <ul id="naviList"/> </li> <li> <a href="/the-team.aspx"> <div>The Team</div> </a> <ul id="naviList"> <li> <a href="/news.aspx"> <div>News</div> </a> <ul id="naviList"> <li> <a href="/news/test-article-#1.aspx"> <div>Test Article #1</div> </a> </li> <li> <a href="/news/test-article-#2.aspx"> <div>Test Article #2</div> </a> </li> </ul> </li> <li> <a href="/contact-us.aspx"> <div>Contact Us</div> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
Thanks,
Wade.
Hi Wade
Can you provide a link where one can see your problem?
If you would please post your code samples once again and try to format them using "preformat" I think it would be easier to get an overview of your code and to help you out. Unfortunately the forum is sometimes a bit buggy so some posts gets very wide. :)
Actually I think you should be able to use the one in the runway module. You actually just need to turn the javasript of if you don't want the sliding effect.
Try installing the module and play a bit around with it.
/Jan
I'm sorry, but the code is so unreadable that I'm not going to even try! ;-)
I had this problem once and it was because I was using empty div's like so:
<div id="clearMe" />
But the Tidy clean-up screws them up and nests the next div in my empty div. So I changed it to:
<div id="clearMe"> </div>
For the record, there is a non-breaking space in before the /div :
& n b s p ;
Without the spaces.
Regarding the possibly collapsed <div /> you can change the behavior of your xslt output to use <div></div> instead by changing the output-method to "html" from "xml". Collapsing empty tags is the xml way and keeping them expanded is the html way. More info about this at blog.percipientstudios.com/.../...o-xslt-file.aspx
cheers,doug.
Wow Doug, very nice and detailed article!
Unfortunately, I did in fact try to change from xml to html and the big problem I ran into is that this:
<img src="image.jpg" alt="an image" />
And also this:
<img src="image.jpg" alt="an image></img>
Turned into this:
<img src="image.jpg alt="an image">
The lack of a proper closing element prevents the site from validating as XHTML strict.
So in the end I had to use the "hack" above.
@Sebastian, I've not had that problem with html output. I wonder why we get different results. Time to run some tests I guess!
@Doug I had this the other day, with the Blog 4 Umbraco package, in BlogPostListComments.xslt when I change that one to HTML, the img tags didn't get closed properly. This might be an issue with Tim's implementation, but it seems unlikely. Switching that one to xml did the trick.
@Sebastiaan, You're absolutely right! I can't believe I never noticed. :blush:
Here's the effect of the output method="html" according to the XSLT spec (www.w3.org/TR/xslt#section-HTML-Output-Method):
The default html version is 4.0, which specifies that the result should be output as HTML conforming to the HTML 4.0 Recommendation. The html output method should not output an element differently from the xml output method unless ....
The html output method should not output an end-tag for empty elements. For HTML 4.0, the empty elements are: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, and param.
For example, an element written as <br /> or <br></br> in the stylesheet should be output as <br>
There you have it... you can either use method="html" and not get closing slashes for a number of html tags (in keeping with the HTML4 spec), or you can use method="xml" and will get collapsed tags if they are empty (such as <div></div> being output at <div />, which browsers often dislike).
So... choose your output method carefully based on your needs.
I'll update my blog post with this information.
Hi all,
Thanks to everyone for taking the time to reply, I really appreciate it. Sorry about the way the code was displayed, I've only just started posting here, and didn't know about the different way to enter posts. Thanks for the tip Jan =). And a huge thank you to Sebastiaan... your solution worked! It was in fact the div that was indeed the problem. I simply changed the div to start and finish on either side of the <ul></ul> tags, and gave it the id needed and it corrected the problem. So once again thanks Sebastiaan, sometimes the answer is staring us in the face, but after looking at it for so long you can't see the simple things for the life of you...
By the way, that article that Doug sent a link to is an amazing guide... it'll really help me with understanding and making xslt code, seeing as I don't come from a code background. Thanks Doug.
By the way, how do I change the status of this post to solved?