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.