TYPO3: XHTML Valid 3 Level Menu in Typoscript

This is sort of a long snippet, but anyway it is an example of making a vertical 3 level menu, which expand and collapse according to the active and current chosen list-item / page. The menu made as nested unordered list, and further it is wrapped in a box made of divs, where the title of active parent page to the menu is shown. The pattern of the typoscript menu could be repeated, if a fourth level is wanted, and it could be shortened to a 1 or 2 level menu.


## SubMenu [Begin]
# Removes the menubox from the page ids: 19, 23 (if the page does not have subpages, you don't want an empty box)
[PIDinRootline = 19,23]
# do nothing (PIDupinRootline doesn't seem to work?)
[else]
boxtop = TEXT
# get the title of the page on the first level of the rootline.
boxtop.data = leveltitle:1
boxtop.wrap =

|
boxbottom = TEXT
boxbottom.value =

[end]

lib.subMenu = COA
lib.subMenu {
# include top of columnbox
9 < boxtop # making the menu 10 = HMENU # defines the menu entrylevel 10.entryLevel = 1 10.1 = TMENU 10.1 { noBlur = 1 CUR = 1 IFSUB= 1 ACTIFSUB = 1 } # Formatting of menu normal entries as list items. 10.1.NO { wrapItemAndSub =

  • |
    }
    # Current menu item is unlinked and wrapped in span
    10.1.CUR {
    wrapItemAndSub =

  • |
  • doNotLinkIt = 1
    allWrap = |
    }
    # If the menu item has subs add class plus to change icon to it has subs
    10.1.IFSUB {
    wrapItemAndSub =

  • |
  • }
    # Active items above current to be formatted differently
    10.1.ACTIFSUB {
    wrapItemAndSub =

  • |
  • }

    # Wrap the first level of the menu inside an unordered list
    10.1.wrap =

      |

    10.2 = TMENU
    10.2 {
    noBlur = 1
    CUR = 1
    IFSUB= 1
    ACTIFSUB = 1
    }
    # Same formatting of menu entries as list items.
    10.2.NO {
    wrapItemAndSub =

  • |
  • ATagParams =
    }
    # Current menu item is unlinked and marked too
    10.2.CUR {
    wrapItemAndSub =

  • |
  • doNotLinkIt = 1
    allWrap = |
    }
    # If the menu item has subs add class plus to change icon
    10.2.IFSUB {
    wrapItemAndSub =

  • |
  • }
    # Active items above current to be formatted differently as for first level
    10.2.ACTIFSUB {
    wrapItemAndSub =

  • |
  • }
    # Wrap the second level of the menu inside an unordered list
    10.2.wrap =

      |

    10.3 = TMENU
    10.3 {
    noBlur = 1
    CUR = 1
    IFSUB = 1
    ACTIFSUB = 1
    }
    # Same formatting of menu entries as list items.
    10.3.NO {
    wrapItemAndSub =

  • |
  • ATagParams =
    }
    # Current menu item is unlinked and marked too
    10.3.CUR {
    wrapItemAndSub =

  • |
  • doNotLinkIt = 1
    allWrap = |
    }
    # If the menu item has subs add class plus to change icon
    10.3.IFSUB {
    wrapItemAndSub =

  • |
  • }
    # Active items above current to be formatted differently as for higher levels
    10.3.ACTIFSUB {
    wrapItemAndSub =

  • |
  • }
    # Wrap the third level of the menu inside an unordered list
    10.3.wrap =

      |

    # end of columnbox
    11 < boxbottom } ## SubMenu [End]

    This entry was posted in TYPO3/TypoScript. Bookmark the permalink.

    4 Responses to TYPO3: XHTML Valid 3 Level Menu in Typoscript

    1. Stig Kjeldsen says:

      Hi Klaus

      Is it possible to have an ACT and a NO state to the title of the parent page?

    2. rita says:

      How is this menu look like???? is there any shau?

    3. Hi Klaus,

      that’s a mighty helpful snippet – is there any chance you could include the HTML output, too?

    4. Tony Lush says:

      Seems that the section

      10.1.NO {
      wrapItemAndSub = |
      }

      is missing the closing

      Thanks — Tony

    Leave a Reply