So erstellst du einfache Menüs in Typo 3 mit TypoScript

TypoScript-Anleitung: Menü erstellen in TYPO3

Mit TypoScript kannst du in TYPO3 ganz einfach dynamische Menüs erstellen, die automatisch die Seitenstruktur deines TYPO3-Projekts abbilden. Dieser Blogbeitrag zeigt dir, wie du ein einfaches Menü mit TypoScript erstellst, es anpasst und schließlich auf deiner Webseite anzeigst.

1. Ein einfaches Menü erstellen

Beginnen wir mit einem einfachen Menü, das die erste Ebene der Seitenstruktur darstellt. Das TypoScript-Objekt, das dafür verwendet wird, heißt HMENU (Hierarchical Menu). Ein einfaches Beispiel für ein Navigationsmenü sieht so aus:

page = PAGE
page {
    typeNum = 0

    10 = HMENU
    10 {
        1 = TMENU
        1 {
            NO = 1
            NO {
                # Definiere das HTML für jedes Menüelement
                stdWrap.htmlSpecialChars = 1
                linkWrap = <li>|</li>
                ATagTitle.field = title
            }

            wrap = <ul>|</ul>
        }
    }
}

Erklärung des Codes:

• HMENU: Erzeugt ein Menü auf Basis der Seitenstruktur.
• 1 = TMENU: Das TMENU erstellt ein Textmenü. Die Zahl 1 gibt an, dass wir hier die erste Ebene des Menüs definieren (die Hauptnavigation).
• NO = 1: NO bedeutet, dass dies der Standardzustand eines Menüpunktes ist (also wenn der Punkt nicht aktiv oder ausgewählt ist).
• linkWrap = <li>|</li>: Umgibt jeden Menüpunkt mit einem <li>-Tag, um ein HTML-Listenmenü zu erzeugen.
• wrap = <ul>|</ul>: Umgibt das gesamte Menü mit einem <ul>-Tag, um eine ungeordnete Liste zu erzeugen.

Das Menü zieht sich sozusagen die Seiten die Angelegt sind und erstellt daraus das Menü:

Das sieht noch recht unspektakulär aus, aber es wird schonmal angezeigt.
Das Problem wie man sieht, dass ich in der Unterseite 1 noch eine weitere Unterseite angelegt habe, die nicht mit angezeigt wird. Hier müssen wir ein erweitertes Menü zusammenstellen.

2. Ein erweitertes Menü mit Unterseiten (mehrere Ebenen)

Manchmal möchtest du auch ein Menü erstellen, das Unterseiten anzeigt. Dafür kannst du in TypoScript mehrere Ebenen hinzufügen:

page = PAGE
page {
    typeNum = 0

    10 = HMENU
    10 {
        # Ebene 1: Hauptmenü
        1 = TMENU
        1 {
            NO = 1
            NO {
                linkWrap = <li>|</li>
            }
            wrap = <ul>|</ul>
        }

        # Ebene 2: Untermenü
        2 = TMENU
        2 {
            NO = 1
            NO {
                linkWrap = <li>|</li>
            }
            wrap = <ul>|</ul>
        }
    }
}

Erklärung des Codes:

• Ebene 1: Erzeugt das Hauptmenü (wie im ersten Beispiel).
• Ebene 2: Hiermit wird das Untermenü erstellt. Wenn eine Seite Unterseiten hat, werden diese in einer weiteren ul-Liste angezeigt.

Somit wird mir die Unterstruktur angezeigt, sobald ich auf dem Tree Root Element bin:

Möchte ich nun, dass es immer ausgeklappt ist, muss ich noch folgendes zum code hinzufügen

... REST VOM CODE
        1 {
            expAll = 1 # IMMER AUSKLAPPEN
            NO = 1
            NO {
                linkWrap = <li>|</li>
            }
            wrap = <ul>|</ul>
        }
... REST VOM CODE

3. Aktiver und ausgewählter Menüpunkt hervorheben

Es ist oft hilfreich, den aktuell ausgewählten Menüpunkt hervorzuheben. Dies kannst du tun, indem du die Zustände ACT (aktiv) und CUR (aktuell) in dein TypoScript-Menü integrierst:

page = PAGE
page {
    typeNum = 0

    10 = HMENU
    10 {
        1 = TMENU
        1 {
            expAll = 1
            NO = 1
            NO {
                linkWrap = <li>|</li>
            }

            # Aktiver Menüpunkt (bei Klick)
            ACT = 1
            ACT {
                linkWrap = <li class="active">|</li>
            }

            # Aktuelle Seite (derzeit geöffnet)
            CUR = 1
            CUR {
                linkWrap = <li class="current">|</li>
            }

            wrap = <ul>|</ul>
        }
    }
}

Erklärung:

• ACT: Dieser Zustand wird verwendet, um einen Menüpunkt zu markieren, der gerade aktiv ist (wenn du ihn anklickst).
• CUR: Dieser Zustand hebt den Menüpunkt hervor, der der aktuellen Seite entspricht.

5. Menü nur bestimmte Seiten anzeigen

Manchmal möchtest du nur bestimmte Seiten in deinem Menü anzeigen, z.B. nur die Unterseiten einer bestimmten Seite. Das kannst du über die special-Funktion in TypoScript steuern:

page = PAGE
page {
    typeNum = 0

    10 = HMENU
    10 {
        special = directory
        special.value = 123

        1 = TMENU
        1 {
            NO = 1
            NO {
                linkWrap = <li>|</li>
            }
            wrap = <ul>|</ul>
        }
    }
}

Erklärung:

• special = directory: Mit diesem Befehl wird ein Menü generiert, das nur die Unterseiten einer bestimmten Seite anzeigt.
• special.value = 123: Hier gibst du die ID der Seite an, deren Unterseiten im Menü angezeigt werden sollen. Ersetze 123 durch die tatsächliche ID der gewünschten Seite.

Fazit

Mit TypoScript kannst du in TYPO3 flexible und dynamische Menüs erstellen, die automatisch auf die Seitenstruktur deines Projekts reagieren. Durch die Kombination von HMENU, TMENU, und verschiedenen TypoScript-Einstellungen wie NO, ACT, CUR und special, kannst du Menüs erstellen, die genau deinen Anforderungen entsprechen.