Ein Klassiker hier mal aufgezeigt
TypoScript
- lib.mainMenu = HMENU
- lib.mainMenu.wrap = <ul>|</ul>
- lib.mainMenu {
- 1 = GMENU
- 1.noBlur = 1
- 1.expAll = 1
- 1.NO = 1
- 1.NO {
- XY = [20.w]+60,72
- wrap = <li>|</li>
- #background image
- 10 = IMAGE
- 10.file = fileadmin/templates/img/menu_bg_no.gif
- 10.offset = 0,0
- #text
- 20 = TEXT
- 20 {
- text.field = title
- fontFile = fileadmin/templates/fonts/{$schriftart}
- fontSize = 36
- fontColor = #ffffff
- offset = 45,45
- align = left
- antiAlias = 1
- }
- }
- 1.ACT = 1
- 1.ACT < .1.NO
- 1.ACT {
- 10.file = fileadmin/templates/img/menu_bg_act.gif
- }
- 1.RO = 1
- 1.RO < .1.ACT
- }
Und was passiert hier?
Zeilen 1-3 sind klar: HMENU erstellen und mit <ul>|</ul> wrappen. Ab Zeile 4 wird das grafische Menü erstellt.
Zeile 5: Das Bild soll nicht mit einer gepunkteten Linie umgeben werden, wenn man dieses anklickt.
Zeile 6: Alle Einträge gleich anzeigen. (für Unterseiten, wenn benötigt)
Zeilen 7-26: Hier wird der Normalzustand des Menüeintrags erstellt. Dabei werden wir folgende Einstellungen verwenden:
Zeile 9: XY bestimmt die Größe des Bildes. Dieses soll automatisch berechnet werden aus dem in Zeile 18 angegebenen Feldinhaltes und dann noch 60px breiter ([20.w]+60). Die Höhe des Bildes soll 72px betragen.
Das ganze wird in Zeile 10 mit <li>|</li> gewrapped.
Unser Text soll auf einem Hintergrundbild positioniert werden. Dazu legen wir in Zeilen 12-14 erst mal das Bild fest, das wir verwenden wollen. Dabei bestimmt Zeile 14 die Ausrichtung des Hintergrundbildes zum Menübild.
Die Zeilen 16-26 holen sich aus dem title-Feld der Seite den Inhalt, nehmen den in Zeile 19 bestimmten TT-Font mit eine Größe von 36, der Schriftfarbe von Weiß (#ffffff) und basteln und das Bild zusammen. Dabei soll der Text 45px von link und 45px von oben versetzt werden.
Die Zeilen 27-31 bestimmen den Status für die ausgewählte Seite (ACT). Dafür übernehmen wir die ganzen Einstellungen des NO-Status (Zeile 28). Lediglich in Zeile 30 geben wir ein anderes Hintergrundbild an.
Die Zeilen 32f sind noch für den RollOver zuständig. Damit ein anderes Hintergrundbild verwendet wird, übergeben wir an RO die gleichen Einstellungen wie ACT (Zeile 33).
Damit haben wir eine erste Ebene erstellt. Die zweite Ebene wird analog erzeugt.
