Grafische Menüs sind zwar schön, aber leider nicht barrierefrei. Außerdem benötigen sie JavaScript für Rollover-Effekte. Umgehen lässt sich dieses Problem mit einem Textmenü, bei dem die Buchstaben per CSS ausgeblendet werden und eine Hintergrundgrafik angezeigt wird. Wie ein solches Menü mit Bordmitteln von TYPO3 realisiert wird, zeigt dieser Artikel.
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.
Navigation über Listenelemente abbilden
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>
Listing 1
Die Formatierung der Navigation übernimmt eine knappe CSS-Datei. Diese hat zwei Hauptaufgaben:
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. :-(