Kommentare 6

TYPO3 – Tutorial um ein einfaches TYPO3 HMENU / TMENU zu erstellen

Dies ist ein Tutorial für ein einfaches TYPO3 Menü des Typs TMENU. Dies ist sehr gut geeignet für TYPO3 Anfänger. Keine Angst, es ist ganz einfach.

TYPO3 Menü des Typs TMENU im Frontend

TYPO3 Menü des Typs TMENU im Frontend

Dann will ich nicht lange quatschen und komme gleich zu ein paar wichtigen Befehlen mit denen du eine erste TYPO3 Navigation erstellen kannst. Um dein Menü umsetzen zu können, werden wir ein paar Zeilen in der eigenen System-Skriptsprache Typoscript schreiben. 

Seiten im Backend anlegen

TYPO3 Backend: Seiten für das Menü anlegen

TYPO3 Backend: Seiten für das Menü anlegen

Als erstes musst du natürlich einige Seiten im TYPO3 Backend anlegen, damit du später das Resultat im Frontend siehst.

Typoscript Template anlegen

Nun kann es weitergehen, im Backend musst du nun noch ein Typoscript Template anlegen.

TYPO3 Backend: Typoscript Template anlegen

TYPO3 Backend: Typoscript Template anlegen

  1. In der Navigation „Template“ auswählen
  2. Dann die Startseite der Webseite hier „Home“ auswählen
  3. Zum Schluss noch auf den Button „Create template for a new site“ klicken

Typoscript im Template einfügen

Dieses Skript fügst du nun in das eben erstellte Template ein. Dazu klickst du einfach auf den Setup-Bearbeitungsfeld-Button. (1)

TMENU Skript in das Template einfügen

TMENU Skript in das Template einfügen

Nun musst du nur noch das komplette Skript kopieren und einfügen.

Füllung des ###MENU### Markers

Damit TYPO3 weiß an welcher Stelle das Menü in euerem HTML Template eingebunden werden soll, müsst ihr in eure HTML Template Datei noch einen Marker erstellen, zum Beispiel so ###MENU###.

Im Typoscript muss noch folgendes ergänzt werden um den HTML-Template-Marker ###MENU### mit dem Inhalt von lib.navi zu befüllen.

Video-Tutorial – TYPO3 Menü

Erklärung der einzelnen Menübefehle

HMENU

Der Befehl „HMENU“ sagt unserem TYPO3-System, dass nun ein Menü erstellt werden sollen. In diesem Bereich kannst du anschließend globale Einstellungen vornehmen.

entryLevel

Den Befehl „entryLevel“ musst du je nach deinem Seitenaufbau (Backend) anpassen. Dieser Befehl steht für das Einstiegslevel, ab dem das Menü gerendert werden soll.

TMENU

Der Befehl „TMENU“ definiert als nächstes genauer was für ein Typ das Menü sein sollen. TMENU steht für ein Textmenü – es gibt auch GMENU was zum Beispiel ein Menü wäre welches aus Bildern erstellt wird.

Du sollest meiner Meinung auf Menüs des Typs GMENU verzichten, da es in Zeiten von Webfonts einfach bessere Lösungen vorhanden sind. Früher hat man diesen Typ benutzt um bestimmte Hausschriften deiner Firma darstellen zu können.

wrap

Der Befehl wrap umschließt den Inhalt, den du um die Pipe (|) herumschreibst. Der Inhalt, der in den Bereich der Pipe kommt wird nun definiert.

NO

Der Befehl NO steht für den Menü Normalzustand. Diesen musst du mit NO = 1 auf aktiv stellen (Dies gilt auch für alle weiteren Menüzustände)

wrapItemAndSub

Hier wird jeder Link zur der Seite mit den Elementen um die Pipe umschlossen. So ähnlich wie beim wrap.

Beispiel:

Du schreibst im Typoscript:

Ergebnis wäre dann:

ACT

Der Befehl ACT steht für einen Aktivenzustand, sobald du dich auf einer Seite befindest, bekommst diese Seite in deinem Menü deinen zuvor definieren Zustand, in diesem Beispiel eine Klasse.

2 < .1

Mit dem Befehl 2 < .1 werden alle Konfigurationen, die du in der ersten Ebene geschrieben hast (1 = TMENU) auf die nächst tiefere Ebene vererbt. (2= TMENU)

Das bedeutet du könntest auch den kompletten Teil von (1=TMENU ) anstelle des 2 <.1 schreiben, du musst nur beachten, dass du dann mit (2=TMENU) beginnst, sonst überschreibst du alle deine Einstellungen.

Weiterführende Links

Die Typoscript Referenz listet dir alle weiteren Befehle auf, falls du bestimmte Einstellungen und Funktionen benötigst.

 



6 Kommentare

  1. Pingback: TMENU wird nicht angezeigt - TYPO3 Forum & Portal

  2. Pingback: Anonymous

  3. Pingback: Anonymous

  4. ShaoKhan sagt

    Hallo Felix,

    alles in allem nicht schlecht. Für mich als Anfänger stellt sich hier aber die Frage, wie ich nun dein „navi“ in meinen Platzhalter ###NAVI### bekomme.
    Klingt vielleicht blöd, aber ich bin völlig jungfräulich was Typo betrifft.
    Ich versuche mich gerade an Typo 6.1.

    Vielleicht könntest du mir das noch beantworten.

    Vielen Dank.

    • Felix Habenicht sagt

      Hey,

      klar kann ich es versuchen.
      Benutzt du Templavoila?
      Falls nicht könnte dies die Lösung sein.

      Du hast in deinem HTML-Template einen Marker erstellt z.B. ###NAVI###.

      Dies kommt in dein Typoscript, das Menüskript von oben musst du auch noch mit einbinden.

      Unter template.file wird dein HTML Template eingelesen
      Und im Bereich Marks wird dein Marker mit dem Skript befüllt.

      Nicht getestet 😉
      lg Felix

  5. Pingback: TYPO3 – Tutorial für ein TMENU mit dynamischen IDs oder Klassen {field:uid}

Schreibe einen Kommentar

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