I have an Umbraco 4.5 site (running old XSLT schema) and I have a nested horizontal flyout menu that uses superfish jquery plugin (http://www.jankoatwarpspeed.com/examples/vimeo_navigation/) with supersubs (the sub menu width adjusts to the size of the largest item). This all works fine and I have used it on many sites but I have a site where I need the borders of the sub-menu to be curved similar to the menu on the following link when you hover over "Help" (http://www.jankoatwarpspeed.com/examples/vimeo_navigation/).
Looking at the code on that site it seems like they have put an image either side of the first "li" of the sub menu to create the curves at the top and the last "li" of the submenu contains images as well to create the curves at the bottom. That is all well and good with a static menu but my menu is created dynamically using XSLT based on the sitemap template. Can anyone tell me how I can modify my code so that it knows what the first "li" of the sub menu is and puts an image either side and also adds another "li" at the end of each submenu that I can put images in?
My current XSLT is as follows:
<xsl:param name="currentPage"/>
<!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="3"/>
Thanks for the response, I thought I might have to use something like that but wouldn't that apply it to the first menu item as well as the first submenu item? How do I stop it applying it to the first menu item and only apply it to the first sub menu items?
I -think- that should be it, but I am no expert (yet anyway :P). Adding a second parameter that only gets a value if the drawNodes template is called from the drawNodes function should do the trick. Not entirely certain this is allowed though. But it's worth a shot :P
Thanks for the response, I have used the code you supplied and merged it into what I already have but I am getting an error when trying to save, is there something that I have missed? This is the code I have and below that is the error:
<xsl:param name="currentPage"/>
<xsl:include href="e-commerce-menu.xslt" />
<!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="3"/>
Ok I have been playing with the code and it seems I was wrong to doubt Bob in the first place, especially without trying out what he said because it seems that doing what he said does in fact only add it the the first "li" item of the submenu and not to the top level menu therefore I am now using the following code which adds an image either side of the first link in the submenu, just need to setup my styles now to make it look nice (that should be fun!). Thanks for all the help everyone. This is my code, let me know if there are any improvements I can make to it:
<xsl:param name="currentPage"/>
<xsl:include href="e-commerce-menu.xslt" />
<!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="3"/>
Seems I spoke too soon, I have managed to get the curve on the first item ok but the last one is turning out to be a problem is seems by using the same method and trying to add images either side of the last "li" item it is in fact adding images either side of the last item on the first level menu as well as the submenu (if that makes sense!). Anyone know why this is and how I can stop it? Also I have an issue with it repeating the History link because that is both the first link and the last link in the submenu. Ideally I would like to be able to add an additional "li" item at the end of each sub menu that I could put the bottom curves in if that is possible. This is my code and below it is my output:
<xsl:param name="currentPage"/>
<xsl:include href="e-commerce-menu.xslt" />
<!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="3"/>
Thanks again for your help, that has pointed me in the right direction and I now have it working almost how I want, the only issue I have left is if the submenu only has 1 item, if that is the case then I want it to add images to either side of the "li" and also give it a class of "lastSubItem", I did try putting a when statement that said if it was position 1 and also position last then do the following but that that did not seem to work (not sure why), is there another bit of code I can put in my "when" statement to do something similar (basically needs to say if this is the only item)? This is what I currently have, the part I am refering to is at the end in the listLinks template:
<xsl:param name="currentPage"/>
<xsl:include href="e-commerce-menu.xslt" />
<!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="3"/>
Thanks again for the response, I thought that would be the case but the problem I have is that I'm not sure what the code is that I need to check if it is the only one, what do I put in the "when" statement to check if it is the only li item in the submenu?
Sorry to go on about this one but can anyone help me with the code that I need to make this work, I assume I need to add something another when statement like the last one shown in the code below but I don't know what to put where the XXX's are:
but that applies it to the top level node that has only one item rather than applying it to the submenu item itself, for example if I have the following structure then it applies whatever I put in the when statement to the "Test B" menu item as opposed to the "Test B sub 1" item which from looking at the code is understandable:
Test A Test B - Test B sub 1 Test C - Test C sub 1 - Test C sub 2 - Test C sub 3
I thought I would be clever and try the following:
Sorry to go on but just wondered if anyone had any thoughts on this? It sounds quite simple what I want to do but seems to be turning out to be more complicated than I first thought.
Just in case anyone was interested in this I did manage to resolve it finally with the following code, I put in a when statement to check if the item was position = first and also position = last and modified the other when statement to check if it was position = first and position = not last. I did try something similar originally but it didn't seem to work, must of been some dodgy coding! Thank to everyone who helped with this issue. This the XSLT I am now using:
Nested superfish menu with curved borders
Hi All,
I have an Umbraco 4.5 site (running old XSLT schema) and I have a nested horizontal flyout menu that uses superfish jquery plugin (http://www.jankoatwarpspeed.com/examples/vimeo_navigation/) with supersubs (the sub menu width adjusts to the size of the largest item). This all works fine and I have used it on many sites but I have a site where I need the borders of the sub-menu to be curved similar to the menu on the following link when you hover over "Help" (http://www.jankoatwarpspeed.com/examples/vimeo_navigation/).
Looking at the code on that site it seems like they have put an image either side of the first "li" of the sub menu to create the curves at the top and the last "li" of the submenu contains images as well to create the curves at the bottom. That is all well and good with a static menu but my menu is created dynamically using XSLT based on the sitemap template. Can anyone tell me how I can modify my code so that it knows what the first "li" of the sub menu is and puts an image either side and also adds another "li" at the end of each submenu that I can put images in?
My current XSLT is as follows:
Thanks in advance for any help :-)
if you check for position() in your for-each loops and apply a class to the li, that should handle what you need...
so...
<li>
<xsl:if test="position() = 1">
<xsl:attribute name="class">first</xsl:attribute>
</xsl:if>
</li>
same thing for position()=last()
hope that points you in teh right direction.
Hi Bob,
Thanks for the response, I thought I might have to use something like that but wouldn't that apply it to the first menu item as well as the first submenu item? How do I stop it applying it to the first menu item and only apply it to the first sub menu items?
<xsl:template name="drawNodes">
<xsl:param name="parent"/>
<xsl:param name="isSubItem"/>
<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 class="sf-menu">
<xsl:for-each select="$parent/node [string(./data [@alias='umbracoNaviHide']) != '1' and @level <= $maxLevelForSitemap]">
<xsl:choose>
<xsl:when test="data [@alias = 'nomenulink'] ='1'">
<a href="#"><xsl:value-of select="@nodeName"/></a>
</xsl:when>
<xsl:otherwise>
<li>
<xsl:if test="position() = 1" and $isSubItem = true>
<xsl:attribute name="class">first</xsl:attribute>
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
</li>
<xsl:if test="position() = last() and $isSubItem = true">
<li class="last"> </li>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:if test="count(./node [string(./data [@alias='umbracoNaviHide']) != '1' and @level <= $maxLevelForSitemap]) > 0">
<xsl:call-template name="drawNodes">
<xsl:with-param name="isSubItem" select="true"/>
</xsl:call-template>
</xsl:if>
</xsl:for-each>
</ul>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
I -think- that should be it, but I am no expert (yet anyway :P). Adding a second parameter that only gets a value if the drawNodes template is called from the drawNodes function should do the trick. Not entirely certain this is allowed though. But it's worth a shot :P
-Ferdy
Hi Ferdy,
Thanks for the response, I have used the code you supplied and merged it into what I already have but I am getting an error when trying to save, is there something that I have missed? This is the code I have and below that is the error:
Ok I have been playing with the code and it seems I was wrong to doubt Bob in the first place, especially without trying out what he said because it seems that doing what he said does in fact only add it the the first "li" item of the submenu and not to the top level menu therefore I am now using the following code which adds an image either side of the first link in the submenu, just need to setup my styles now to make it look nice (that should be fun!). Thanks for all the help everyone. This is my code, let me know if there are any improvements I can make to it:
nice work! glad you sorted it all out!
Seems I spoke too soon, I have managed to get the curve on the first item ok but the last one is turning out to be a problem is seems by using the same method and trying to add images either side of the last "li" item it is in fact adding images either side of the last item on the first level menu as well as the submenu (if that makes sense!). Anyone know why this is and how I can stop it? Also I have an issue with it repeating the History link because that is both the first link and the last link in the submenu. Ideally I would like to be able to add an additional "li" item at the end of each sub menu that I could put the bottom curves in if that is possible. This is my code and below it is my output:
and this is the output source for the menu:
let's take a look at your xslt...
basically, you are calling a template to render ALL of your menu items...
so, if you don't want the images on the first level of the menu... you could add an additional contidion to your xsl:if test statement...
@level != '1' -- this would say, when the level is not equal to 1 then let's put the images on the first and the last...
Hi Bob,
Thanks again for your help, that has pointed me in the right direction and I now have it working almost how I want, the only issue I have left is if the submenu only has 1 item, if that is the case then I want it to add images to either side of the "li" and also give it a class of "lastSubItem", I did try putting a when statement that said if it was position 1 and also position last then do the following but that that did not seem to work (not sure why), is there another bit of code I can put in my "when" statement to do something similar (basically needs to say if this is the only item)? This is what I currently have, the part I am refering to is at the end in the listLinks template:
you can add one more layer of logic and set a specific class if the count of the nodes in the for each = 1 ....
so basically a chose statment...
Hope that helps...
Hi Bob,
Thanks again for the response, I thought that would be the case but the problem I have is that I'm not sure what the code is that I need to check if it is the only one, what do I put in the "when" statement to check if it is the only li item in the submenu?
Sorry to go on about this one but can anyone help me with the code that I need to make this work, I assume I need to add something another when statement like the last one shown in the code below but I don't know what to put where the XXX's are:
the count statement would be the same as your for-each statement that got you into the template...
count(./node [string(./data [@alias='umbracoNaviHide']) != '1') = 1
Hi Bob,
Thanks for the response and thanks for being so patient with me, I tried what you said:
but that applies it to the top level node that has only one item rather than applying it to the submenu item itself, for example if I have the following structure then it applies whatever I put in the when statement to the "Test B" menu item as opposed to the "Test B sub 1" item which from looking at the code is understandable:
Test A
Test B
- Test B sub 1
Test C
- Test C sub 1
- Test C sub 2
- Test C sub 3
I thought I would be clever and try the following:
but for some reason unknown to me it applied it to the "Test C sub 2" item! Any ideas?
Sorry to go on but just wondered if anyone had any thoughts on this? It sounds quite simple what I want to do but seems to be turning out to be more complicated than I first thought.
Just in case anyone was interested in this I did manage to resolve it finally with the following code, I put in a when statement to check if the item was position = first and also position = last and modified the other when statement to check if it was position = first and position = not last. I did try something similar originally but it didn't seem to work, must of been some dodgy coding! Thank to everyone who helped with this issue. This the XSLT I am now using:
is working on a reply...