Each menu state (NO, ACT, CUR, RO...) has a stdWrap property which is usually used to load the page title:

NO {
  stdWrap.field = nav_title // title
}

However, you can load absolutely any TypoScript content object using the stdWrap's property cObject. Here's the example on how to create a menu where each menu item will have title rendered with GIFBUILDER, small description text took from page's abstract field, and a first image from the media field:

temp.menu.main = HMENU
temp.menu.main.1 = TMENU
temp.menu.main.1 {
  noBlur = 1
  NO.linkWrap = |
  NO {
    stdWrap.cObject >
    stdWrap.cObject = COA
    stdWrap.wrap = <div class="teaser"> | </div>
    stdWrap.cObject {
      10 = TEXT
      10.value = <div class="teaser_left_content">
      20 = IMAGE
      20.wrap = <div class="teaser_label"> | </div>
      20.file = GIFBUILDER
      20.file {
        XY = [10.w],[10.h]
        backColor = #FFFFFF
        10 = TEXT
        10 {
          text.field = title
          text.case = upper
          offset = 0,15
          niceText = 1
          fontColor = #000000
        }
      }
      30 = TEXT
      30.wrap = <div class="teaser_content"> | </div>
      30.field = abstract
      40 = TEXT
      40.value = </div>
      50 = IMAGE
      50.wrap = <div class="teaser_right_content"> | </div>
      50.file.import = uploads/media/
      50.file.import.field = media
      50.file.import.listNum = 0
    }
  }
}

Furthermore, with a little bit of playing with CSS you can achieve roll-over effect without using TYPO3's RO states.

Cheers

Bookmark now: