[...]
10.stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');"
}
}
}
}
}
}
Listing 6
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.
Fazit
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.
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.
6 Antworten
von Andreas Sauer 09.04.2009 (12:11Uhr) 1.
Tolles Skript, Jochen. Schön, dass die Accessibility endlich auch in der T3N immer stärker in den Fokus rückt.
Ich versuche gerade ähnliches für einen Kunden um zu setzen und habe noch ein Problem: Die zweite Ebene der Menüpunkte soll vertikal unter den Buttons der ersten erscheinen und diese sollen jeweils die gleiche Breite haben, wie der Menüpunkt auf erster Ebene. Die Interner Explorer stellen das UL-Element aber allesamt mit falscher Breite dar.
Ich würde deshalb gerne die Breite des Bildes in die Zweite Ebene weiterreichen, also ungefähr
2.wrap = |
Die {TSFE:lastImgResourceInfo|0}-Angabe wird unten aber nicht mehr geparst und nicht durch die Breite des Bildes ersetzt.
Ich habe leider von TS noch nicht wirklich viel Ahnung, kannst du mir auf die Sprünge helfen?
von Andreas Sauer 09.04.2009 (12:13Uhr) 2.
Ach. Mist, Tags werden geschluckt, so sollte das aussehen:
2.wrap = <ul style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');">|</ul>
von Robert Heel 07.09.2009 (09:09Uhr) 3.
Danke für das gute Script! Einen kleinen Bug habe ich entdeckt (welcher sporadisch Menüpunkte nicht anzeigt wenn man keinen "Rollover" Hintergrund verwendet): Das "+[20.w]" wird nicht benötigt.
von 16.03.2010 (15:56Uhr) 4.
[...] [...]
von Problem mit GTMENU - TYPO3 Forum & P… 17.03.2010 (15:12Uhr) 5.
[...] [...]
von Johanna Streich 29.08.2011 (11:08Uhr) 6.
Schade, super Umsetzung des Menüs, aber irgendwas mache ich falsch.
Zwar habe ich jetzt die verlinkten Grafiken, aber die Textlinks sind weiterhin darüber sichtbar.
Und meine bereits erstellen Überschriften Grafiken (funktionierte ganz ähnlich) gehen nicht mehr. Da wird nicht einmal mehr eine Grafik erstellt. Irgendwie hebt sich das durch das Menü auf. :-(