[TYPO3-english] Fluid and categories (TYPO3 6.2.x): render a multilevel menu for Bootstrap 3.x

[Bert Hiddink [BENDOO e-work solutions]]

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