Hi, in additon, what you would need to do is look at your content tree and find the top most node to each of the menu sections you wish to render. You then need to use something like:
GetDescendants(pass in some condition)
This will allow you to get each item under a section.
From there you can just use xslt to get the node properties to render out each item.
First, make content a level a in the same li tag as it's sub elements. Next, make rest of the sub elements under the master content holder. After that, if level = 2 then follow this template to make the div and insert text with b tag. Then, if level = 3 make a simple link.
should be simple, right? no somewhere I just screw up in the xslt and bam, useless html junk code.
Big menu XSLT problems
Hello, I am new to XSLT, that's why I need some help with this one.
I have a "Big menu", that I need to make a XSLT to create the menu items from umbraco nodes.
Here is the html code from the big menu:
<ul class="menuTemplate4 decor4_1">
<li><a href="#CSS-Menu">CSS Menu</a></li>
<li class="separator"></li>
<li><a href="#Horizontal-Menus" class="arrow">Horizontal Menus</a>
<div class="drop decor4_2" style="width: 640px;">
<div class="left">
<b>CSS Menu</b>
<div>
<a href="#">Html 5 menu</a><br>
<a href="#">Web menu CSS</a><br>
<a href="#">Css menus</a><br>
<a href="#">Nav element</a><br>
<a href="#">SEO menu</a> </div>
</div>
<div class="left">
<b>Menu Templates</b>
<div>
<a href="#">Menu template</a><br>
<a href="#">Menu skin</a><br>
<a href="#">Web menu styles</a><br>
<a href="#">Best css menus</a> </div>
</div>
<div class="left">
<b>SEO Friendly</b>
<div>
<a href="#">Search engine friendly</a><br>
<a href="#">Best css menu</a><br>
<a href="#">Most popular menus</a><br>
<a href="#">Best web menu designs</a><br>
<a href="#">E-Commerce sites</a><br>
<a href="#">CSS Templates</a><br>
<a href="#">Menu Design Templates</a><br>
<a href="#">Clean layout & alignment</a><br>
<a href="#">Favorite menus</a> </div>
</div>
<div class="left" style="text-align:right; width:200px;">
<img src="CSS%20Menu-filer/hd6.png" style="width:128px; height:128px;"><br>
Search Engine friendly (SEO) </div>
<div style="clear: both;"></div>
</div>
</li>
<li class="separator"></li>
<li><a href="#CSS">CSS</a></li>
<li class="separator"></li>
<li><a href="#Horizontal-Menu-CSS">Horizontal Menu CSS</a></li>
<li class="separator"></li>
<li><a href="#Web-Menu" class="arrow">Horizontal Web Menu</a>
<div class="drop decor4_2 dropToLeft2" style="width: 500px;">
<div class="left">
<b>SHOPPING TOOLS</b>
<div>
<a href="#">Build your script</a><br>
<a href="#">Review current offers</a><br>
<a href="#">See All ...</a> </div>
<b>RSS FEED</b>
<div>
<a href="#">Find a location</a><br>
<a href="#">Request a test drive</a><br>
<a href="#">See All ...</a> </div>
</div>
<div class="left">
<b>BE CREATIVE</b>
<div>
<a href="#">Build your script</a><br>
<a href="#">Review current offers</a><br>
<a href="#">See All ...</a> </div>
</div>
<div class="left" style="text-align:right; width:160px;">
<img src="CSS%20Menu-filer/hd7.png" style="width:128px; height:128px;"><br>
Contact Us </div>
</div>
</li>
<ul>
</ul></ul>
I need some help with making the XSLT to generate the menu items.
Thank you, any help would be appreciated.
Hey, could you show us your structure in Umbraco, what you will need is some conditional for-each loops :) Charlie :)
Hi, in additon, what you would need to do is look at your content tree and find the top most node to each of the menu sections you wish to render. You then need to use something like:
GetDescendants(pass in some condition)
This will allow you to get each item under a section.
From there you can just use xslt to get the node properties to render out each item.
Hope this helps :)
Charlie :)
I have tried but failed so far.
First, make content a level a in the same li tag as it's sub elements.
Next, make rest of the sub elements under the master content holder.
After that, if level = 2 then follow this template to make the div and insert text with b tag.
Then, if level = 3 make a simple link.
should be simple, right? no somewhere I just screw up in the xslt and bam, useless html junk code.
Could you tell me what you are getting rendered from your xslt at the moment if anything atall?
So far this:
<?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"/>
<!-- update this variable on how deep your navigation should be -->
<xsl:variable name="maxLevel" select="3"/>
<xsl:template match="/">
<ul class="menuTemplate4 decor4_1">
<li><a href="/">Home</a></li>
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="$currentPage/ancestor-or-self::* [@level=1 and @isDoc]"/>
</xsl:call-template>
</ul>
</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 or umbraco.library:IsLoggedOn() = 1)">
<xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level <= $maxLevel]">
<!--lv 1 -->
<xsl:if test="@level <= 1">
<li>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="siteTitle"/>
</a>
<xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level <= $maxLevel]) > 0">
<div class="drop decor4_2">
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="."/>
</xsl:call-template>
</div>
</xsl:if>
</li>
</xsl:if>
<!--lv 2 -->
<xsl:if test="@level = 2">
<div class="left">
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="siteTitle"/>
</a>
<xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level <= $maxLevel]) > 0">
<div>
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="."/>
</xsl:call-template>
</div>
</xsl:if>
</div>
</xsl:if>
<!--lv 3 -->
<xsl:if test="@level <= 3">
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="siteTitle"/>
</a>
<br></br>
<xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level <= $maxLevel]) > 0">
<div>
<xsl:call-template name="drawNodes">
<xsl:with-param name="parent" select="."/>
</xsl:call-template>
</div>
</xsl:if>
</xsl:if>
</xsl:for-each>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
output:
<ul class="menuTemplate4 decor4_1"><li><a href="/">Home</a></li><div class="left"><a href="/services.aspx">Services</a><div><a href="/services/ships.aspx">Ships</a><br></div></div><a href="/services.aspx">Services</a><br><div><a href="/services/ships.aspx">Ships</a><br></div></ul>
Umbraco content tree:
Home
- Services
- Ships
So it is not working, really need some help here :)
Sorry i had missed you had replied. Did you manage to get this sorted? Charlie :)
No, I still can't figure out how to fix this.
Could you look at my script above and point me in the right direction?
is working on a reply...