In unserem heutigen Artikel wollen wir euch zeugen, wie ihr ein TYPO3 Menü mit selbstgerenderten Bildern erstellen könnt. Aus heutiger Sicht würde ich jedem empfehlen das Menü mit Webfonts zu erstellen, denn durch ein Grafikmenü steigen die Request an den Server und dies reduziert die Performance der Internetseite. Außerdem werden zusätzlich zu jedem Request Bilddaten übertragen, dies schlugt zusätzlich weitere Performance der Internetseite. Webfonts werden in allen aktuellen Browsern unterstützt, sogar im IE7.
Wer dennoch auf ein GMENU angewiesen ist, findet hier ein gutes Beispiel.
Erste Voraussetzung ist, dass auf eurem System eine Grafikbibliothek installiert ist. Nur so kann TYPO3 die Grafiken erstellen.
Ihr könnt dies überprüfen, indem ihr im TYPO3 Backend auf den Menüpunkt ”Installation” klickt und euch dann unter “Image Processing” anschaut, ob Typo3 Bilder und Texte erstellen kann.
Wenn das funktioniert, braucht ihr noch die Schriftart, die ihr benutzen wollt. Diese ladet ihr in ein Verzeichnis eurer Wahl und dann könnt ihr auch schon Typoscript coden.
Wir wollen ein einfaches GMENU erstellen.
Wichtig ist, dass wir das Format gif benutzen, dadurch wird die Bildergröße reduziert. Es ist natürlich auch jpg oder png möglich, jedoch bleiben die Bilder bei dem Format gif von der Datenmenge sehr schön klein. Das hat den Vorteil, dass die Internerseite schneller im Browser geladen werden kann.
Zwei Menüzustände in einer Grafik erstellen
Zusätzlich erstellen wir den Standardmenüpunkt und den Mouseovereffekt in einem Bild. Das Bild wird nur durch CSS bei Mouseover verschoben. Dadurch sparen wir nochmal die Hälfte der Requests zum Server.
Erklärungen zum Script
Im Abschnitt 10 = TEXT wird das erste Bild erstellt und im Abschnitt 20 = TEXT wird das Bild für den Mouseover erstellt. Das fertige Bild würde dann so aussehen.
Die Breite wird dynamisch durch XY=[10.w] gesetzt.
Des weiteren muss noch der Pfad unter fontFile an eure Schrift angepasst werden.
fontFile = fileadmin/font/myfont.TTF
Durch ..
imgParams = title="{field:title}"
allStdWrap.insertData = 1
.. bekommt das <img> Tag noch einen Titel-Tag.
WICHTIG!
- Falls das Menü nicht dargestellt wird, verändert einfach mal niceText = 0. Oft ist dies ein Grund der verhindert, dass die Schrift angezeigt wird
- Ein anderes Problem könnte sein, dass die Schrift nicht benutzt wird. Überprüft dabei, ob im Quelltext schon Grafiken eingebunden werden, nur keinen Text enthalten
Der komplette Typoscript für diese Menü sieht so aus:
lib.gmenu = COA
lib.gmenu{
2 = HMENU
2{
1 = GMENU
1{
wrap =<ul class="menu-ul">|</ul>
NO = 1
NO {
wrap =<li class="menu-li">|</li>
format = gif
XY=[10.w]+5,[10.h]+45
10 = TEXT
10 {
text.field = title
fontFile = fileadmin/font/myfont.TTF
fontSize = 14
fontColor = #414141
offset = 0,18
niceText = 1
antiAlias= 0
}
20 = TEXT
20 {
text.field = title
fontFile = fileadmin/font/myfont.TTF
fontSize = 14
fontColor = #d62919
offset = 0,48
niceText = 1
antiAlias= 0
}
imgParams = title="{field:title}"
allStdWrap.insertData = 1
ATagParams = class="gmenu-no"
}
ACT = 1
ACT {
10.fontColor = #d62919
}
}
}
CSS Beispiel, für das Verschieben des Menüzustands.
.gmenu-no img:hover {
margin-top: -200px;
}
Viel Erfolg beim Einbauen. =)
Habt ihr Fragen oder funktioniert etwas nicht? Dann schreibt uns!
Stop! Das könnte dich auch interessieren!
Author auf Google+: +Felix Habenicht
