TYPO3 – Tutorial, wie erstelle ich ein Menü des Typs GMENU?

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.

TYPO3 GMENU erstellen

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+:

  • Diesen Beitrag weiterempfehlen:

6 Gedanken zu „TYPO3 – Tutorial, wie erstelle ich ein Menü des Typs GMENU?

  1. Pingback: TYPO3 – Menü Beispiele | Das Brainworxx Weblog

  2. Erwin Ikon

    ist es möglich einen EINZIGEN menüeintrag mit einer anderen FontColor zu belegen?
    Also Menüpunkte 1,2,3 und 4 haben die Farbe Schwarz aber der Menüpunkt 5 hat die Farbe Blau?
    Ist irgendwie etwas komplizierter bei einem GMENU oder?

    Antworten
  3. Sötnos

    Hallo zusammen.
    Danke für die vielen guten Anleitungen hier, hat mir schon viel geholfen.

    Meine Frage: Ich möchte wie am Anfang darauf hingewiesen mein Menu mit Piktogramen aus Webfonts darstellen.
    Soweit habe ich dies hinbekommen, nur steht neben jedem Piktogram auch der Seitentitel, wie kann ich dies verhindern?
    Habt Ihr nicht eine Anleitung wie man ein solches Menu mit Typo3 umsetzen kann?

    Gruss aus der Schweiz

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Lösen Sie bitte die Rechenaufgabe. *