C0mput3rz & T3chno1ogy

I configured the two menus I use on my site (yes, this site) in Typoscript today. The submenu is relatively straightforward, while the header menu took a little more documentation reading. Note that almost all of the styling is just CSS, so really it was a matter of configuring the correct wraps for each menu item. You'll see the NOrmal state config takes advantage of optionSplit, specifying a different wrap for every page element in the first level. The label you see inside the computer screen is the title of the Parent of the page you are visiting, so I've implemented that as another hierachical menu with just one, unclickable page (lib.activeLabel). This goes in the Template setup of the root page.

# Graphical header menu
lib.mainMenu = HMENU
 
lib.mainMenu {
  special = list
  special.value = 25,27,1,23,1,26,24
  1 = TMENU
  1 {
    NO.wrapItemAndSub (
      <li id="mill">|</li> || 
      <li id="purse">|</li> || 
      <li id="milk">|</li> || 
      <li id="notebook">|</li> || 
      <li id="bottle">|</li> || 
      <li id="scissors">|</li> || 
      <li id="books">|</li>
    )
    NO.stdWrap.wrap = <span class="label">|</span>
    # I despise Javascript
    NO.ATagParams = onmouseover="show(this);" onmouseout="hide(this);"
  }
}
 
# Label for current page
lib.activeLabel = HMENU
lib.activeLabel {
  entryLevel = 1
  special = list
  1 = TMENU 
  1 {
    NO.allWrap = :|
    NO.doNotLinkIt = 1
  }
}
 
# Subnavigation
lib.subMenu = HMENU
lib.subMenu {
  wrap = <ul id="cats">|</ul>
  entryLevel = 1
  1 = TMENU
  1 {
    NO.allWrap = <li>|</li>
    NO.stdWrap.htmlSpecialChars = 1
    
    ACT = 1
    ACT.stdWrap.htmlSpecialChars = 1
    ACT.allWrap = <li class="active">|</li>
  }
}
		

References

• TSRef: OptionSplit
• TSRef: MENU Objects