How to build up a menu using the hierarchical transformation
This article gives you instructions on how to build up a menu using the hierarchical transformation.
Let’s say you have a menu structure which is to be generated in exactly the same way as it is designed. You can’t use standard Kentico navigation web parts to achieve that. In this case you can take advantage of the Universal Viewer web part and apply a hierarchical transformation to it.
Let’s have the following HTML output:
<nav class="nav">
<ul role="navigation">
<li>
<a href="#"><b>computer</b></a><span>computer</span>
<ul class="sub">
<li>
<a href="#">hard drivers</a>
</li>
<li>
<a href="#">software</a>
</li>
</ul>
</li>
<li>
<a href="#"><b>web design</b></a><span>web design</span>
<ul class="sub">
<li>
<a href="#">domain names</a>
</li>
<li>
<a href="#">hosting</a>
</li>
</ul>
</li>
</ul>
</nav>
1) Create a new hierarchical transformation and add the following list of transformations into it to specify which transformations will be rendered for the first level of your menu hierarchy:
(Type) (Document types) (Level)
Header transformation All 0
<nav class="nav">
<ul role="navigation">
<li>
Footer transformation All 0
</li>
</ul>
</nav>
Separator transformation All 0
</li>
<li>
Item transformation CMS.MenuItem 0
<a href="#"><b><%# Eval("DocumentName") %></b></a><span><%# Eval("DocumentName") %></span>
2) Add the following list of transformations into that hierarchical transformation to specify which transformations will be rendered for the second level of your menu hierarchy:
Header transformation All 1
<ul class="sub">
Footer transformation All 1
</ul>
Separator transformation All 1 (needs to be empty to brake transformation inheritance)
Item transformation CMS.MenuItem 1
<li><a href="#"><%# Eval("DocumentName") %></a></li>
If you want to highlight a currently selected item in the menu, you can use the following code in your Item transformation:
ASCX transformation (same as above):
<%# IfCompare(Eval("NodeAliasPath"), CMS.CMSHelper.CMSContext.CurrentDocument.NodeAliasPath.ToString(), "regular", "selected") %>
so for example, the class property of a LI element would look like this:
<li class='<%# IfCompare(Eval("NodeAliasPath"), CMS.CMSHelper.CMSContext.CurrentDocument.NodeAliasPath.ToString(), "regular", "selected") %>'>
Text/XML or HTML transformations:
<li class='{% if (NodeAliasPath == CurrentDocument.NodeAliasPath) {return "selected"} else {return "regular") #% }'>
If you want to highlight
all items in the path, you can use following code in your Item transformation:
ASCX transformation (same as in article):
<%# IfCompare(CMS.CMSHelper.CMSContext.CurrentDocument.NodeAliasPath.StartsWith(Eval("NodeAliasPath").ToString()).ToString(), "True", "regular", "selected") %>
so for example for the class property it would look like this:
<li class='<%# IfCompare(CMS.CMSHelper.CMSContext.CurrentDocument.NodeAliasPath.StartsWith(Eval("NodeAliasPath").ToString()).ToString(), "True", "regular", "selected") %>'>
Text/XML or HTML transformations:
<li class='{% if (CurrentDocument.NodeAliasPath.StartsWith(NodeAliasPath)) {return "selected"} else {return "regular") %}'>
-jh-