How to use option split to control typo3 menu properties?

Question

I am trying to resolve a design issue implementation in typo3. Essentially I have to implement a tabbed menu (only the active state is tabbed) that's generated from the directory, but each active (tabbed) menu has to have a different bg colour (matching the tab body box). I opted to use a TMENU initially but was introduced to the optionsplit functionality earlier as a way to achieve this but I can't think of a way achieve this using a TMENU so I am currently experimenting with GMENU, however I am not getting the right results. Below is my current code which gives me blank white spaces. I am experimenting with copying the tab images and centralising the text within the image, but using an optionsplit to copy the files.

temp.navmenu1 = HMENU
special = directory
special.value = {$idMenu}
entryLevel = 1
temp.navmenu1.1 = GMENU

temp.navmenu1.1 {
  NO = 1
  NO{
  NO.Wrap = <ul style="display: inline; "> | </ul>
  backColor = #d9d9d9
    10 = TEXT
    10.text.field = title
    10.offset = 0,5
    10.align = center
    10.niceText = 1
  }
  ACT < .NO
  ACT{
      XY = [4.w],[4.h]

      4 = IMAGE
      4.file = {$hmtab}|*|{$midtab}|*|{$endtab}
    }

}

# Temp items aren't rendered, so let's copy it into a TSOP
tv.navmenu1 < temp.navmenu1

page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

Answer 1

I do not think a new site should use GMENU any more. Instead you should use TMENU with CSS.

Here is a basic example that should get you started:

10 = HMENU
10 {
  special = directory
    # start with pid 3
  special.value = 3
  1 = TMENU
  1 {
    expAll = 1
    wrap = <ul>|</ul>
    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>
      ATagTitle = abstract // description // title
    }
    ACT < .NO
    ACT.wrapItemAndSub = <li class="active">|</li>
    CUR < .NO
    CUR.wrapItemAndSub = <li class="current">|</li>
  }
  2 < .1
  3 < .1
  4 < .1
  4.wrap = <ul class="level-4">|</li>
}

Of course you can now use option split for wrapItemAndSub like so: wrapItemAndSub = <li class="first">|</li> |*| <li class="normal">|</li> |*| <li class="last">|</li>

The rest in then just normal CSS.

Answer 2

If your problem is that you want to wrap different sub-menues on the same level with different class attributes, then have a look at the submenuObjSuffixes property of the TMENU object.

While it is not possible to use optionsplit with wrap (simply because wrap is only executed once) it is very well possible to get the desired result using submenuObjSuffixes.

Here is an example:

1 = TMENU
1 {
    wrap = <ul>|</ul>
    submenuObjSuffixes =  |*| b |*| c

    NO = 1
    NO {
        wrapItemAndSub = <li>|</li>
    }
}

2 < .1
2.wrap = <ul class="firstItem">|</ul>
2b < .1
2b.wrap = <ul class="middleItems">|</ul>
2c < .1
2c.wrap = <ul class="lastItem">|</ul>

3 < .2
3b < .2b
3c < .2c
4 < .2
4b < .2b
4c < .2c

This will wrap the first 2nd-level menu with class "firstItem", the last 2nd-level menu with "lastItem" and all inbetweens with class "middleItems".

Please understand that the suffixes are appended to ALL subsequent menu levels. So if you use submenuObjSuffixes on level 1 it will not only affect level 2 but also levels 3, 4, ... and you have to define corresponding options on these levels too, or they will not be rendered.