Das grafische Menü

Ok, wir haben unser Grundgerüst, aber mal ehrlich - das sieht doch grausig aus.
Also wollen wir mal was für unsere Ästhetik tun

Das Menü oben soll ein grafisches Menü werden, da wir einen Lieblingsfont uns dafür ausgesucht haben - kein Problem.
Tapo3 bringt einen Menütyp mit: GMENU (graphic menu) das genau das tut was wir vorhaben.

Grafisches Menü - das heisst, es werden Grafiken erzeugt und die Beschriftung der Grafiken erfolgt dynamisch. Das hat den Vorteil, das wir beliebige Fonts benutzen können, die dann in der Beschriftung erscheinen. Hierzu haben erstellen wir unter fileadmin einen Ordner "fonts" und laden die gewünschten ttf-Files rein.

Am Typoscript brauchen wir garnicht viel verändern, wir müssen nur spezielle grafische Anweisung mit unterbringen.
Hier mal das Typoscript für unser grafisches Menü:

TypoScript
TOPMENU = HMENU
TOPMENU {
	special = directory
	special.value = 2
	1 = GMENU
	1.wrap=<ul>|</ul>
	1.noBlur = 1
	
	1.NO = 1
	1.NO {
		XY = 100,20
		align = center
		background = #fdcba9
		wrap = <li>|</li>
		
		#Hintergrundbild
		5 = IMAGE
		5.file = fileadmin/images/topmenu.gif
		
		#Beschriftung als Text rendern
		10 = TEXT
		10.text.field = title
		10.fontColor = #FFFFFF
		10.fontFile = fileadmin/fonts/MAIAN.TTF
		10.fontSize = 14
		10.antiAlias = 1
		10.offset = 0,14
		10.align = center

	}
	1.RO < .1.NO 
	1.RO = 1
	1.RO.5.file = fileadmin/images/topmenu_ro.gif
	1.RO.10.fontColor = #000000
	
	1.ACT < .1.NO
	1.ACT = 1
	1.ACT.5.file = fileadmin/images/topmenu_act.gif
	1.ACT.10.fontColor = #0A3754
	
}

Na, Schweissperlen auf der Stirn ?
So schlimm ist es gar nicht, Der Anfang sollte uns bekannt vorkommen. Allerdings ist der Teil von 1.NO doch neu.
Hier die Erklärung dazu:

XY - Das ist die Grösse unserer Grafik, in unserem Falle 100px Breite, 20px Höhe
align - das ist die Ausrichtung
background - der Farbwert für den Hintergrund

Unsere Grafik besteht aus 2 Teilen, einem Hintergrundbild und der Beschriftung.
Als erstes definieren wir die Hintergrundgrafik (Objekt 5). Es wird eine Referenz zu einem bestehenden Bild angegeben, das in unserem Fall die selben Ausmasse hat.
Objekt 10 enthält die Beschriftung als Textobjekt.
text.field=title - Die beschriftung kommt aus dem Datenbankfeld "Title", also der Seitentitel.
Als Font nehmen wir unseren Lieblingsfont, den wir im Ordner fileadmin/fonts vorliegen haben - ist das nicht scharf ?
Die nächsten Werte beziehen sich auf die Schriftformatierung (Grösse, Kantenglättung, Abstand vom Rand und Ausrichtung.
Da wir den Text zentrieren, kann der Offset vom linken Rand mit 0 angegeben werden.

Das wars auch schon, für Rollover(RO) tauschen wir das Bild und die Schriftfarbe aus, ebenso für den aktiven Zustand.

Wow, wir haben mit wenigen Zeilen erreicht, das Typo3 uns dynamisch Grafiken aus dem Seitentitel mit gewünschtem Font generiert - wer das mal mit php versucht hat, wird wissen, wie komplex das ist.

Ok, das wars schon.

Typo3