TYPO3: Making a simple menu as an unordered list in XHTML

by Klaus Kjeldsen Posted on March 23, 2007

This example how to make a menu as an unordered list, by enabling ACT (active) and CUR (current) it sets the <li> tags with attributes class=”active” and id=”current” respectively. The current page is wrapped in <span> and not linked.


  1. ## MainMenu [Begin]
  2. lib.mainMenu = HMENU
  3. lib.mainMenu.entryLevel = 0
  4. lib.mainMenu.wrap = <ul>|</ul>    
  5. lib.mainMenu.1 = TMENU
  6. lib.mainMenu.1 {
  7.         noBlur = 1
  8.         ACT = 1
  9.         CUR = 1
  10. }
  11. lib.mainMenu.1.NO {
  12.         allWrap = <li>|</li>
  13. }
  14. lib.mainMenu.1.ACT {
  15.         allWrap = <li class="active">|</li>
  16. }
  17. lib.mainMenu.1.CUR {
  18.         allWrap = <li id="current"><span>|</span></li>
  19.         doNotLinkIt = 1
  20. }
  21. ## MainMenu [End]

The above example can be extended using field:title and field:subtitle, if a specific id for styling is needed or if some information should be placed as value in the title attribute.

  1. lib.mainMenu.1.NO {
  2.         allWrap = <li>|</li>
  3.         ATagParams.dataWrap = id="{field:title}" title="{field:subtitle}"
  4. }
  5. lib.mainMenu.1.ACT {
  6.         allWrap = <li class="active">|</li>
  7.         ATagParams.dataWrap =  id="{field:title}" title="{field:subtitle}"
  8. }


Related Articles:

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

3 Responses to TYPO3: Making a simple menu as an unordered list in XHTML

  1. okapi says:
    January 12, 2009 at 9:33 pm

    Thank you a lot, that helped me to solve a problem that i had with a menu i was working on!

    Michael

  2. benzine vergelijken says:
    February 20, 2010 at 6:43 pm

    Thanks so much, this solution worked right out of the box for me. I do wonder if it’s required to first use a hierarchiel menu(HMENU) for the root element and a text menu(TMENU) inside.
    The corresponding CSS should be a breeze now!

  3. michael bruns says:
    June 10, 2010 at 8:30 pm

    I was curious if there was a way to apply the id={field:title} to the (li) tag instead of the (a) tag?

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>