Hello Loek!

Thanks for your suggestion! I'll test it and let you know if it worked!

Thanks again!

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}" />
  </f:for each>

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).


On 15-09-16 14:00, Bert Hiddink [BENDOO e-work solutions] wrote:

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-parent="#SubSubMenu1">Subitem 3 c <i class="fa
        <div class="collapse list-group-submenu list-group-submenu-1"
          <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>
        <a href="#" class="list-group-item"
data-parent="#SubMenu1">Subitem 4 d</a>
      <a href="javascript:;" class="list-group-item">Subitem 2</a>
      <a href="javascript:;" class="list-group-item">Subitem 3</a>
    <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>

However, using the snippet below, how could I distinguish between the
menulevels since I need to give a different data-parent for each
level. Any ideas?
<f:section name="categoryTree">
        <f:for each="{categories}" as="category">
                        <f:link.page title="{category.item.title}"


Thanks in advance!


TYPO3-english mailing list

Reply via email to