Die Anforderungen an Internetseiten steigen. Viele Kunden fordern das Verwenden ihrer Hausschrift, weitestgehende Barrierefreiheit und Internetseiten, die auch ohne JavaScript funktionieren. Reine Grafik- oder Textmenüs erfüllen diese Anforderungen nicht. Einen Ausweg bieten Textmenüs, bei denen der verlinkte Text über CSS ausgeblendet und stattdessen eine Hintergrundgrafik angezeigt wird. Das bedient sowohl die Suchmaschine als auch den normalen Besucher der Website.

Der bei GMENUs über JavaScript gesteuerte MouseOver-Effekt soll über a:hover in CSS gesteuert werden. Dazu werden beide Zustände in eine Grafik geschrieben, die bei Mausberührung nach oben oder unten verschoben wird.

Basis für die Navigation ist eine Liste, die über <ul> und <li> abgebildet wird. Da die Navigation über TYPO3 dynamisch geschrieben wird, ist die Zeichenlänge der einzelnen Punkte und damit der generierten Hintergrundgrafiken vorher unbekannt. Die Elemente müssen sich also an die Breite der Navigationspunkte dynamisch anpassen können. Dazu wird über das „style“-Attribut die Breite individuell in jeden Link geschrieben.

<ul id="navi">
 <li><a xhref="punkt-1.html" style="width:66px; background-image: url('/typo3temp/GB/ff8db8a838.gif');">Punkt 1</a></li>
 <li class="current"><a xhref="langer-navigationspunkt-2.html" style="width:212px; background-image: url('/typo3temp/GB/552f9f2db0.gif');">Langer Navigationspunkt 2</a></li>
 <li><a xhref="punkt-3.html" style="width:66px; background-image: url('/typo3temp/GB/bd319c7487.gif');">Punkt 3</a></li>
</ul>

Die Formatierung der Navigation übernimmt eine knappe CSS-Datei. Diese hat zwei Hauptaufgaben:

1. Ausblenden des Texts durch Verschieben außerhalb des sichtbaren Bereichs (text-indent:999em)
2. Verschieben der Hintergrundgrafik bei Mausberührung, sodass der vorher verdeckte Teil der Grafik auftaucht (background-position:0px -30px)

ul#navi {list-style: none;}
ul#navi li {float: left;}
ul#navi li a {background-repeat:no-repeat; display:block; overflow:hidden;text-indent:999em; white-space:nowrap; height:30px;}
ul#navi li a:hover, ul#navi li.current a,ul#navi li.over a {background-position:0px -30px;}

Zunächst wird ein reguläres TMENU [1] in Form einer Liste erstellt, aber die Verlinkung dieser Elemente ausgeschaltet, da der Link später noch bearbeitet wird.

lib.gtmenu = HMENU
lib.gtmenu {
 1 = TMENU
 1 {
 wrap = <ul id="navi">|</ul>
 NO.doNotLinkIt = 1
 NO.wrapItemAndSub = <li>|</li>
 [...]

Anschließend wird der NO-Zustand als eigenes Content Object Array (COA) definiert, um den Link nach eigenen Wünschen zusammenstellen zu können.

 [...]
 NO.stdWrap.cObject = COA 
 NO.stdWrap.cObject {
 
 10 = TEXT
 10 {
 field = title
 typolink {
 parameter.field = uid
 [...]

Über den Style-Parameter des Links wird die Hintergrundgrafik hinterlegt. Um einem Link weitere Eigenschaften mitzugeben, bietet TypoScript die Eigenschaft „AtagParams“ an, die oftmals mit CSS-Anweisungen befüllt wird. Hier muss jedoch eine Grafik auftauchen. Dafür wird auch AtagParams als COA definiert, indem über IMG_RESOURCE die Hintergrundgrafik generiert wird. Diese wird wie beim GMENU über den GIFBUILDER erstellt [2]. Der hover-Zustand wird in die gleiche Grafik weiter unten eingebaut.

[...]
### AtagParams als COA definieren, um die Grafik rendern zu können ###
 ATagParams.cObject = COA
 ATagParams.cObject {

### Image-Resource nach unseren Wünschen generieren ### 
 10 = IMG_RESOURCE 
 10.file = GIFBUILDER
 10.file {
 XY = [10.w]+[20.w]+10,70
 transparentColor = #ffffff
 10 = TEXT
 10 {
 text.field = subtitle//title
 fontSize = 14
 fontFile=fileadmin/fonts/verdana.ttf
 offset = 5,20
 fontColor = #787879
 } 

### Roten Hintergrund für den Rollover definieren ###
 20 = BOX
 20.dimensions = 0,30,[10.w]+[20.w]+10,30
 20.color = #e53827 
 
### Text für den Rollover kopieren, nach unten verschieben und einfärben ###
 30 = TEXT
 30 < .10
 30 {
 offset = 5,50
 fontColor = #ffffff
 }
 }
[...]

Eine besondere Schwierigkeit beim Menü stellt die unterschiedliche Breite der Navigationspunkte dar. Um nicht alle Elemente gleich breit zu machen und damit unschöne Lücken zu erhalten, muss ermittelt werden, wie breit die jeweilige Grafik geworden ist. Seit Version 4.1 steht in TYPO3 das Array TSFE:lastimageResourceInfo bereit [3], das verschiedene Eigenschaften der zuletzt über den GIFBUILDER generierten Grafik zurückgibt. Hier wird auf die Breite zugegriffen und mittels eines dataWraps zusammen mit der von IMG_RESOURCE zurückgegebenen URL in den Link geschrieben.

[...]
 10.stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');"

					} 
				} 
			} 
		}
	}
}

Damit ist die Navigation umgesetzt [4]. Natürlich bieten sich durch die Anpassung der CSS-Datei noch weitere Freiheiten in der Gestaltung des Menüs. So kann beispielsweise in TypoScript noch ein CUR- oder ACT-Zustand für aktive Navigationselemente definiert und wie im oberen Beispiel (Listing 1) zu sehen über class="current" in CSS mit entsprechenden Eigenschaften formatiert werden. Denkbar sind daher auch noch weitere Zustände, die alle in die gleiche Grafik über den GIFBUILDER geschrieben werden, die dann per CSS-Klasse an die entsprechende Position verschoben wird.

Durch die konsequente Verwendung des hier vorgestellten Menüs [5] wird das altgediente GMENU überflüssig. Statt dessen erhält man eine Navigation, die alle Vorteile der Barrierefreiheit eines TMENUs und der grafischen Freiheit des GMENUs in sich vereinigt, ohne die bekannten Nachteile in Kauf nehmen zu müssen.
Ein weiterer Vorteil dieser Herangehensweise ist die kürzere Ladezeit der Grafiken, da keine eigene Datei für den Rollover-Zustand geladen werden muss. Somit entfallen auch unschöne Verzögerungseffekte beim Austausch der Datei über JavaScript.

Der Autor

Jochen Stange (31) ist bei der pfälzer Werbeagentur „die medienagenten“ für die Umsetzung von TYPO3-Projekten verantwortlich. Das 8-köpfige Team realisiert neben Internetseiten auch hochwertige Printmedien. In seiner Freizeit beschäftigt er sich mit Origami und seiner Motorsäge, treibt als hochmotivierter Besucher von TYPO3-Events die Entwicklung der Extension tt_clap voran und bedankt sich erneut bei Søren Schaffstein für die ungenehmigte Verwendung dieses Fotos.

Dirk Paulus (33) verließ 2001 die Controlling-Abteilung der BASF, um die Werbeagentur „die medienagenten“ in Bad Dürkheim zu gründen. Seither liest er den Kunden die Wünsche von den Augen ab und betreut sie unter anderem in den Bereichen Usability, Barrierefreiheit und Style. In seiner Freizeit schaut er gerne wehmütig in die Ferne und träumt vom Weltfrieden.