Nested menu in Typo3

Question

I want to create a mixed menu (horizontal & vertical) that replicates the structure of my site.

Assuming my page structure in Typo3 looks like this:

<root>
-FIRST
--child
--child
--child
-SECOND
--child
--child
--child
-THIRD
--child
--child
--child

The menu would then look like this:

FIRST    SECOND    THIRD 
child    child     child
child    child     child
child    child     child

In my previous version, the parent pages where static and I used a TypoScript to create menus for the children. Since I didn't know better, each of the displayed menus had its own code looking something like this:

lib.menuChildren = HMENU
lib.menuChildrenl{
  special = directory
  special.value = {$nav.first}
  1 = TMENU
  1 {
    expAll = 1
    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>
      stdWrap.htmlSpecialChars = 1
      ATagTitle.field = title
    }
    ACT < .NO
    ACT.wrapItemAndSub = <li class="active">|</li>
    CUR < .ACT
    CUR.doNotLinkIt = 1
  }
}

This is the Fluid template rendering the menu:

<ul class="nav nav-default">
  <li>
    <ul class="nav nav-stacked">
      <li class="nav-caption">FIRST</li>
      <f:cObject typoscriptObjectPath="lib.childrenFirst" />
    </ul>
  </li>
  <li>
    <ul class="nav nav-stacked">
      <li class="nav-caption">SECOND</li>
      <f:cObject typoscriptObjectPath="lib.childrenSecond" />
    </ul>
  </li>
  <li>
    <ul class="nav nav-stacked">
      <li class="nav-caption">THIRD</li>
      <f:cObject typoscriptObjectPath="lib.childrenThird" />
    </ul>
  </li>
</ul>

To avoid the hardcoded parents, I'd like to create the entire menu dynamically. How can this be achieved?

Daniel Daniel · Accepted Answer · 2014-01-30T12:55:25

Start your HMENU at the root level and add a depth to your HMENU (2 = TMENU). Something like this (adjust the HTML as you like):

lib.menuChildren = HMENU
lib.menuChildrenl{
  special = directory
  special.value = {$root}
  wrap = <ul class="nav nav-default">|</ul>
  1 = TMENU
  1 {
    expAll = 1
    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>
      stdWrap.htmlSpecialChars = 1
      ATagTitle.field = title
    }
    ACT < .NO
    ACT.wrapItemAndSub = <li class="active">|</li>
    CUR < .ACT
    CUR.doNotLinkIt = 1
  }
  2 < .1
  2.wrap = <ul class="nav nav-stacked">|</ul>
}

To make the appearance vertical/horizontal you have to use CSS.

http://docs.typo3.org/typo3cms/TyposcriptReference/MenuObjects/Index.html

Nested menu in Typo3

1 Answers