Databases
StackOverflow2013
Postsdbo
POCreating a menu using xslt for Umbraco
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCreating a menu using xslt for Umbraco
    text
    copied!<p>I've created a menu in umbraco using XSLT. The menu is using the usual ul and li elements and I'm displaying only the first level of the menu. The aim is to create a menu that expands to show the sub menu when I click a parent node (in the top level).</p> <p>I am after the xslt I would need to expose the sub menu when clicked. </p> <p>I think I would need to make use of ancestor-or-self to detect the current menu and parent menu and display them and also the $currentPage variable.</p> <p>I have the following xslt:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE xsl:stylesheet [ &lt;!ENTITY nbsp "&amp;#x00A0;"&gt; ]&gt; &lt;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" xmlns:tagsLib="urn:tagsLib" xmlns:urlLib="urn:urlLib" exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib urlLib "&gt; &lt;xsl:output method="xml" omit-xml-declaration="yes"/&gt; &lt;xsl:param name="currentPage"/&gt; &lt;xsl:template match="/"&gt; &lt;div id="kb-categories"&gt; &lt;h3&gt;Categories&lt;/h3&gt; &lt;xsl:call-template name="drawNodes"&gt; &lt;xsl:with-param name="parent" select="$currentPage/ancestor-or-self::node [@level=1]"/&gt; &lt;/xsl:call-template&gt; &lt;/div&gt; &lt;/xsl:template&gt; &lt;xsl:template name="drawNodes"&gt; &lt;xsl:param name="parent"/&gt; &lt;xsl:if test="(umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or (umbraco.library:IsProtected($parent/@id, $parent/@path) = 1)) and $parent/@level = 1"&gt; &lt;ul class="kb-menuLevel1" &gt; &lt;xsl:for-each select="$parent/node [string(./data [@alias='showInMenu']) = 1]"&gt; &lt;li&gt; &lt;a href="/kb{umbraco.library:NiceUrl(@id)}"&gt; &lt;xsl:value-of select="@nodeName"/&gt; &lt;/a&gt; &lt;xsl:variable name="level" select="@level" /&gt; &lt;xsl:if test="(count(./node [string(./data [@alias='showInMenu']) = '1']) &amp;gt; 0)"&gt; &lt;xsl:call-template name="drawNodes"&gt; &lt;xsl:with-param name="parent" select="."/&gt; &lt;/xsl:call-template&gt; &lt;/xsl:if&gt; &lt;/li&gt; &lt;/xsl:for-each&gt; &lt;/ul&gt; &lt;/xsl:if&gt; &lt;xsl:if test="(umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or (umbraco.library:IsProtected($parent/@id, $parent/@path) = 1)) and $parent/@level &amp;gt; 1"&gt; &lt;ul class="kb-menuLevel{@level}" style="display: none;"&gt; &lt;xsl:for-each select="$parent/node [string(./data [@alias='showInMenu']) = 1]"&gt; &lt;li&gt; &lt;a href="/kb{umbraco.library:NiceUrl(@id)}"&gt; &lt;xsl:value-of select="@nodeName"/&gt; &lt;/a&gt; &lt;xsl:variable name="level" select="@level" /&gt; &lt;xsl:if test="(count(./node [string(./data [@alias='showInMenu']) = '1']) &amp;gt; 0)"&gt; &lt;xsl:call-template name="drawNodes"&gt; &lt;xsl:with-param name="parent" select="."/&gt; &lt;/xsl:call-template&gt; &lt;/xsl:if&gt; &lt;/li&gt; &lt;/xsl:for-each&gt; &lt;/ul&gt; &lt;/xsl:if&gt; &lt;/xsl:template&gt; &lt;/xsl:stylesheet&gt; </code></pre> <p>I suspect this could be improved using apply-templates, but I'm not yet up to speed with that (this being only the second day of my learning xslt). </p> <p>My menu:</p> <ul> <li>Menu Item 1</li> <li>Menu Item 2 </li> <li>Menu Item 3 </li> <li>Menu Item 4</li> </ul> <p>when I click on Menu Item 2 I will be taken to the page for menu Item 2 and the submenu will also be displayed:</p> <ul> <li>Menu Item 1 </li> <li>Menu Item 2<br> -- Menu Item 2.1<br> -- Menu Item 2.2 </li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul> <p>and so on down the nested menu.</p> <p>Here is some sample xml for the above.</p> <pre><code>&lt;root&gt; &lt;node id="1" nodeTypeAlias="kbHomepage" nodeName="Home" level="1"&gt; &lt;data alias="introduction"&gt; &lt;![CDATA[&lt;p&gt;Welcome&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;node id="2" nodeTypeAlias="guide" nodeName="Menu Item 1" level="2"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;This is some text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;1&lt;/data&gt; &lt;data alias="menuName"&gt;Menu Item 1&lt;/data&gt; &lt;/node&gt; &lt;node id="3" nodeTypeAlias="guide" nodeName="Menu Item 2" level="2"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;This is some text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;1&lt;/data&gt; &lt;data alias="menuName"&gt;Menu Item 2&lt;/data&gt; &lt;node id="4" nodeTypeAlias="guide" nodeName="Menu Item 2.1" level="3"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;Some Text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;1&lt;/data&gt; &lt;data alias="menuName"&gt;Menu Item 2.1&lt;/data&gt; &lt;/node&gt; &lt;node id="5" nodeTypeAlias="guide" nodeName="Menu Item 2.2" level="3"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;Some Text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;1&lt;/data&gt; &lt;data alias="menuName"&gt;Menu Item 2.2&lt;/data&gt; &lt;node id="6" nodeTypeAlias="guide" nodeName="Item 2.2.1 Guide" level="4"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;Some Text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;0&lt;/data&gt; &lt;data alias="menuName"&gt;&lt;/data&gt; &lt;/node&gt; &lt;/node&gt; &lt;/node&gt; &lt;node id="8" nodeTypeAlias="guide" nodeName="Menu Item 3" level="2"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;This is some text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;1&lt;/data&gt; &lt;data alias="menuName"&gt;Menu Item 3&lt;/data&gt; &lt;/node&gt; &lt;node id="9" nodeTypeAlias="guide" nodeName="Menu Item 4" level="2"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;This is some text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;data alias="showInMenu"&gt;1&lt;/data&gt; &lt;data alias="menuName"&gt;Menu Item 4&lt;/data&gt; &lt;/node&gt; &lt;/node&gt; &lt;node id="7" nodeTypeAlias="someAlias" nodeName="Some Other Page" level="1"&gt; &lt;data alias="bodyText"&gt; &lt;![CDATA[&lt;p&gt;This is some text&lt;/p&gt;]]&gt; &lt;/data&gt; &lt;/node&gt; &lt;/root&gt; </code></pre> <p>edit: the following almost does what I need : </p> <pre><code>&lt;xsl:variable name="visibleChidren" select="node[data[@alias='showInMenu'] = 1 and (@level = 2 or descendant-or-self::*[generate-id($currentPage) = generate-id(.)] or preceding-sibling::*[generate-id($currentPage) = generate-id(.)] or following-sibling::*[generate-id($currentPage) = generate-id(.)])]" /&gt; </code></pre> <p>I just need to also include the direct children from the current page.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload