Hello,
Ok, let's have following document structure:
1) Create a hierarchical transformation and add first level transformations into it:
(Type) (Document types) (Level)Header transformation All 0
<div id="sidebar">
<div id="sidebar inner">
<nav class="nav">
<ul role="navigation">
<li>
Footer transformation All 0
</li>
</ul>
</nav>
</div>
</div>
Separator transformation All 0
</li>
<li>
Item transformation CMS.MenuItem 0
<a href="#"><b><%# Eval("DocumentName") %></b></a><span><%# Eval("DocumentName") %></span>2) Now you need to specify, how documents are rendered in a sub menu:
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>As you can see below, if you use this hierarchical transformation in the Universal Viewer web part, the rendered HTML code is very similar to your requested one:
<div id="sidebar">
<div id="sidebar inner">
<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>
</div>
</div>
Best regards,
Jan Hermann