如何在Typo3中将菜单拆分为多个列？

Question

I have a node in Typo3 with a lot of pages in it which I would like to display as a menu in 4 columns. The sorting of the columns should be from left to right and then wrap around.

Like this:

Col1        Col2       Col3       Col4
 A            B          C          D
 E            F          G

Answer 1

In my solution (was done in Typo3 LTS 6.2 but should work with all current versions as well), I used this approach to achieve the columns. Please note that the formatting is done with bootstrap in mind:

# Menu with 4 columns
lib.columnMenu = COA
lib.columnMenu {

  10.wrap = <div class="col-sm-3"><ul> | </ul></div>
  10 = HMENU
  10.special = directory
  10.special.value = INSERT YOUR PAGE ID HERE

  10.1 = TMENU
  10.1.NO{
    allWrap=<li>|</li>

    stdWrap.if.isFalse.prioriCalc=1
    stdWrap.if.isFalse.cObject=TEXT
    stdWrap.if.isFalse.cObject.insertData=1
    stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+3)%4

    allWrap.if.isFalse.cObject=TEXT
    allWrap.if.isFalse.prioriCalc=1
    allWrap.if.isFalse.cObject.insertData=1
    allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+3)%4
    }

  20 < .10
  20.wrap = <div class="col-sm-3"><ul> | </ul></div>

  20.1.NO{
    allWrap = <li>|</li>
    stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+2)%4
    allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+2)%4
    }

  30 < .10
  30.wrap = <div class="col-sm-3"><ul> | </ul></div>

  30.1.NO{
    allWrap = <li>|</li>
    stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+1)%4
    allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ}+1)%4
    }

  40 < .10
  40.wrap = <div class="col-sm-3"><ul> | </ul></div>

  40.1.NO{
    allWrap = <li>|</li>
    stdWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ})%4
    allWrap.if.isFalse.cObject.value=({register:count_HMENU_MENUOBJ})%4
    }     
  }
}
# End Menu

Then you would just include the menu in some fluid template partial like this:

<div class="row mb-20">
  <f:cObject typoscriptObjectPath="lib.columnMenu"/>
</div>