Hello Loek! Thanks for your suggestion! I'll test it and let you know if it worked!
Thanks again! Bert On 15/09/16 15:45, Loek Hilgersom wrote:
Hi Bert, It is possible to do this inside fluid, but not very elegant (you'll need to loop over all categories and first pick only root categories, and for each category you'll have to loop over all again to see if there are any children.... not exactly optimal). But the amount of code is not too bad if you use a recursive partial CategoryLevel.html (untested): <ul class="{ulClasses}"> <f:for each="{categories}" as="category"> <f:if condition="{category.parent}=={parent}"> <li>blabla category markup <f:render partial="CategoryLevel" arguments="{parent:category.parent, ulClasses:'subLevel}" /> </li> </f:if> </f:for each> </ul> And first call it like: <f:render partial="CategoryLevel" arguments="{parent:category.parent, ulClasses:'mainLevel}" /> You'll have to fiddle around with it to get your markup, but you'll get the idea. For a more elegant solution you'll first need to get the categories sorted inside a multidimensional array or object, so you'll need a controller (or maybe some creative viewhelper). Loek On 15-09-16 14:00, Bert Hiddink [BENDOO e-work solutions] wrote:Hello, I need to render a multilevel menu from categories with Fluid, html should be something like this: <div id="MainMenu"> <div class="list-group panel"> <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a> <div class="collapse" id="demo3"> <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu" id="SubMenu1"> <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a> <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a> <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a> <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a> <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a> </div> <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a> </div> <a href="javascript:;" class="list-group-item">Subitem 2</a> <a href="javascript:;" class="list-group-item">Subitem 3</a> </div> <a href="#demo4" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> <div class="collapse" id="demo4"> <a href="" class="list-group-item">Subitem 1</a> <a href="" class="list-group-item">Subitem 2</a> <a href="" class="list-group-item">Subitem 3</a> </div> </div> </div> However, using the snippet below, how could I distinguish between the different menulevels since I need to give a different data-parent for each level. Any ideas? <f:section name="categoryTree"> <ul> <f:for each="{categories}" as="category"> <li> <f:link.page title="{category.item.title}" pageUid="{settings.listPid}" additionalParams="{tx_news_pi1:{overwriteDemand:{categories: category.item.uid}}}">{category.item.title} </f:link.page> </li> </f:for> </ul> </f:section> Thanks in advance! Regards, -brt
_______________________________________________ TYPO3-english mailing list TYPO3-english@lists.typo3.org http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
