12.15 Ein einfaches Grafikmenü auf Basis einer ungeordneten Liste erstellen

Problem

Sie wollen ein einfaches grafikbasiertes Menü mit semantisch korrektem HTML-Code erzeugen.

Lösung

Verwenden Sie die Objekte HMENU und GMENU sowie die Parameter wrap und allWrap.

Dieser Code kommt in Ihr TS-Setup:

temp.basicMenu = HMENU
temp.basicMenu {
  wrap = <div class="bM">|</div>
  entryLevel = 0
  1 = GMENU
  1 {
   expAll = 1
   wrap = <ul>|</ul>
   NO = 1
   NO {
     allWrap = <li>|</li>
     XY = 100,20
     10 = TEXT
     10 {
      text.field = title
      offset = 5,15
     }
   }
   IFSUB < .NO
   IFSUB {
     allWrap = <li>|
   }
  }
  2 < .1
  2 {
   wrap = <ul>|</ul></li>
  }
  3 < .2
}

Und dieser in das TS-Setup Ihrer Seite:

page = PAGE
page.10 < temp.basicMenu

Diskussion

Das gezeigte Menü basiert auf der Urversion des zugänglichen Listenmenüs ...

Get TYPO3 Kochbuch now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.