I am trying to create a navigation with 3 levels. But i can’t get the tpl’s correct.
My navigation template:
<ul>
<li class="first-level"><a class="first-level-item" href="#">Start</a></li>
<li class="first-level"> <a class="first-level-item current" href="#">MasterSub</a>
<div class="submenu">
<div class="shadow-left"></div>
<div class="submenu-col">
<ul>
<li> <a href="#"><strong>Sub1</strong></a>
<ul>
<li><a href="#">subshub 1</a></li>
<li><a href="#">subshub 2</a></li>
<li><a href="#">subshub 3</a></li>
</ul>
</li>
<li><a href="#"><strong>Sub2</strong></a></li>
<li><a href="#"><strong>Sub3</strong></a></li>
</ul>
</div>
<div class="shadow-right"></div>
<div class="shadow-bottom">
<div class="shadow-corner-left"></div>
<div class="shadow-bottom-middle"></div>
<div class="shadow-corner-right"></div>
</div>
</div>
</li>
</ul>
I have tried everyting with ParentRow, Inner and Innerrow, but it doesn’t work.
When i set these parameters:
Parentrow tpl
<li class="first-level"><a class="first-level-item" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
[+wf.wrapper+]
</li>
Outer tpl
<ul>
[+wf.wrapper+]
</ul>
Row Tpl
<li class="first-level"><a class="first-level-item" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
Inner Tpl
<div class="submenu">
<div class="shadow-left"></div>
<div class="submenu-col">
<ul>
[+wf.wrapper+]
</ul>
</div>
<div class="shadow-right"></div>
<div class="shadow-bottom">
<div class="shadow-corner-left"></div>
<div class="shadow-bottom-middle"></div>
<div class="shadow-corner-right"></div>
</div>
</div>
</li>
InnerRow tpl
<li> <a href="[+wf.link+]" title="[+wf.title+]"><strong>[+wf.linktext+]</strong></a>[+wf.wrapper+]</li>
I get this as output:
<ul>
<li class="first-level"><a class="first-level-item" href="#" title="Start">Start</a></li>
<li class="first-level"><a class="first-level-item" href="#" title="Mastersub">Mastersub</a>
<div class="submenu">
<div class="shadow-left"></div>
<div class="submenu-col">
<ul>
<li class="first-level"><a class="first-level-item" href="#" title="Sub1">Sub1</a>
<div class="submenu">
<div class="shadow-left"></div>
<div class="submenu-col">
<ul>
<li> <a href="#" title="subsub 1"><strong>subsub 1</strong></a></li>
<li> <a href="#" title="subsub 2"><strong>subsub 2</strong></a></li>
<li> <a href="#" title="subsub 3"><strong>subsub 3</strong></a></li>
</ul>
</div>
<div class="shadow-right"></div>
<div class="shadow-bottom">
<div class="shadow-corner-left"></div>
<div class="shadow-bottom-middle"></div>
<div class="shadow-corner-right"></div>
</div>
</div>
</li>
<li> <a href="#" title="Sub2"><strong>Sub2</strong></a></li>
<li> <a href="#" title="Sub3"><strong>Sub3</strong></a></li>
</ul>
</div>
<div class="shadow-right"></div>
<div class="shadow-bottom">
<div class="shadow-corner-left"></div>
<div class="shadow-bottom-middle"></div>
<div class="shadow-corner-right"></div>
</div>
</div>
</li>
</ul>
