TYPO3: XHTML Valid 3 Level Menu in Typoscript

by Klaus Kjeldsen Posted on March 29, 2007

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.

  1. ## SubMenu [Begin]
  2. # Removes the menubox from the page ids: 19, 23 (if the page does not have subpages, you don’t want an empty box)
  3. [PIDinRootline = 19,23]
  4. # do nothing (PIDupinRootline doesn’t seem to work?)
  5. [else]
  6. boxtop = TEXT
  7. # get the title of the page on the first level of the rootline.
  8. boxtop.data = leveltitle:1
  9. boxtop.wrap = <div class="columnbox"><div class="columnbox-top">|</div><div class="columnbox-content">
  10. boxbottom = TEXT
  11. boxbottom.value = </div><div class="columnbox-bottom"></div></div>
  12. [end]
  13.  
  14. lib.subMenu = COA
  15. lib.subMenu {
  16.         # include top of columnbox
  17.         9 < boxtop
  18.         # making the menu
  19.         10 = HMENU
  20.         # defines the menu entrylevel
  21.         10.entryLevel = 1
  22.         10.1 = TMENU
  23.         10.1 {
  24.                 noBlur = 1
  25.                 CUR = 1
  26.                 IFSUB= 1
  27.                 ACTIFSUB = 1
  28.         }
  29.        
  30.         # Formatting of menu normal entries as list items.
  31.         10.1.NO {
  32.                 wrapItemAndSub = <li class="normal minus">|
  33.         }
  34.         # Current menu item is unlinked and wrapped in span
  35.         10.1.CUR {
  36.                 wrapItemAndSub = <li id="current" class="minus">|</li>
  37.                 doNotLinkIt = 1
  38.                 allWrap = <span>|</span>
  39.         }
  40.         # If the menu item has subs add class plus to change icon to it has subs
  41.         10.1.IFSUB {
  42.                 wrapItemAndSub = <li class="normal plus">|</li>
  43.         }
  44.         # Active items above current to be formatted differently
  45.         10.1.ACTIFSUB {
  46.                 wrapItemAndSub = <li class="active minus">|</li>
  47.         }
  48.        
  49.         # Wrap the first level of the menu inside an unordered list
  50.         10.1.wrap = <ul class="cb-menu">|</ul>
  51.  
  52.         10.2 = TMENU
  53.         10.2 {
  54.                 noBlur = 1
  55.                 CUR = 1
  56.                 IFSUB= 1
  57.                 ACTIFSUB = 1
  58.                         }
  59.         # Same formatting of menu entries as list items.
  60.         10.2.NO {
  61.                 wrapItemAndSub = <li class="normal minus">|</li>
  62.                 ATagParams =
  63.         }
  64.         # Current menu item is unlinked and marked too
  65.         10.2.CUR {
  66.                 wrapItemAndSub = <li id="current" class="minus">|</li>
  67.                 doNotLinkIt = 1
  68.                 allWrap = <span>|</span>
  69.         }
  70.         # If the menu item has subs add class plus to change icon
  71.         10.2.IFSUB {
  72.                 wrapItemAndSub = <li class="normal plus">|</li>
  73.         }
  74.         # Active items above current to be formatted differently as for first level
  75.         10.2.ACTIFSUB {
  76.                 wrapItemAndSub = <li class="active minus">|</li>
  77.         }
  78.         # Wrap the second level of the menu inside an unordered list
  79.         10.2.wrap = <ul class="cb-submenu">|</ul>
  80.        
  81.         10.3 = TMENU
  82.         10.3 {
  83.                 noBlur = 1
  84.                 CUR = 1
  85.                 IFSUB = 1
  86.                 ACTIFSUB = 1
  87.         }
  88.         # Same formatting of menu entries as list items.
  89.         10.3.NO {
  90.                 wrapItemAndSub = <li class="normal minus">|</li>
  91.                 ATagParams =
  92.         }
  93.         # Current menu item is unlinked and marked too
  94.         10.3.CUR {
  95.                 wrapItemAndSub = <li id="current" class="minus">|</li>
  96.                 doNotLinkIt = 1
  97.                 allWrap = <span>|</span>
  98.         }
  99.         # If the menu item has subs add class plus to change icon
  100.         10.3.IFSUB {
  101.                 wrapItemAndSub = <li class="normal plus">|</li>
  102.         }
  103.         # Active items above current to be formatted differently as for higher levels
  104.         10.3.ACTIFSUB {
  105.                 wrapItemAndSub = <li class="active minus">|</li>
  106.         }
  107.         # Wrap the third level of the menu inside an unordered list
  108.         10.3.wrap = <ul class="cb-subsubmenu">|</ul>
  109.        
  110.         # end of columnbox
  111.         11 < boxbottom
  112. }
  113. ## SubMenu [End]



Related Articles:

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:
    August 23, 2008 at 12:12 am

    Hi Klaus

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

  2. rita says:
    October 14, 2009 at 4:24 pm

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

  3. Ulrik H. Kold says:
    February 11, 2010 at 10:42 am

    Hi Klaus,

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

  4. Tony Lush says:
    May 18, 2010 at 5:38 am

    Seems that the section

    10.1.NO {
    wrapItemAndSub = |
    }

    is missing the closing

    Thanks — Tony

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>