TYPO3 – Responsive Menü Version 2!

TYPO3 – Responsive Menü Version 2!

Der heutige Eintrag widme ich der TYPO3 Gemeinde. Nachdem ich vor geraumer Zeit bereits einen Beitrag in Sachen Responsive Menü gepostet habe, gibt es hier nun mal wieder was frisches dazu.Grundlage der Menü-Struktur stellt das Bootstrap Framework in der Version 3.2 (sollte allerdings auch mit der 3.0er Version ohne weiteres funktionieren).

Ich muss dazu sagen, ich bin immer etwas faul, deswegen lagere ich meine Responsive-Menü Führung in einem extra Punkt aus innerhalb von TYPO3 um so etwas unkomplizierter
auf die CSS Gestaltung einzugehen, ganz ohne Gefahr zu laufen, meine Hauptmenüführung zu überschreiben etc.

Nochmal kurz zur Übersicht:

  • Ihr solltet eine jQuery Bibliothek eingebunden haben! Ohne funktioniert dieses Menü leider nicht
  • Wie oben schon erwähnt, verwendet bitte die zugehörige „bootstrap.js“ oder die „bootstrap.min.js“

Hier nochmal ein Link, falls dies fehlen sollte: HOLDIRBOOTSTRAP

Weiter gehts mit der Einbindung in die Template Struktur:

Hier kann man schon sehen, eingebunden wird das klassische „Hamburger Menü“. Unterhalb der Einbindung folgt dann der Aufruf des Responsive Menü.
Wichtig: Verwendet hier den Typ RAW als ViewHelper. Sicher geht hier auch etwas anderes, allerdings bringen die verschiedenen ViewHelper
auch zusätzliche Optionen mit sich, die unter Umständen zu Fehlern führen könnten.

Nun kommen wir zum TypoScript. Hier kurz und knapp mein Menü. Wenn euch etwas fehlen sollte, passt es einfach an eure Bedürfnisse an:

Das war die Menü-Führung! Vergesst bitte nicht das einbinden der Variable!
Dies passiert bei mir über folgenden Aufruf innerhalb des „Pages“ Objekt:

respMenu < temp.respMenu

Zu guter letzt fehlt eigentlich nur noch ein klein wenig CSS. Hier könnt Ihr ja wieder kräftig drauf losbasteln:

Hier gibt es eigentlich nicht mehr viel zu zusagen. Der einzige Hinweis wäre noch folgender: In der letzten Code Zeile steht ein Display:none.

Das müsst Ihr ggf. anpassen und austauschen. Diese Anweisung blendet bei mir die Hauptnavigation aus (Falls Ihr dies nicht schon eingestellt habt).

Mein Menü besitzt außerdem eine Höhe von 355px fix und wird danach als Scroll Element dargestellt. Das lässt sich sicher noch optimieren, ich finde es allerdings nicht schlecht 😉

Verbesserungsvorschläge sind immer willkommen!

1Kommentar
  • Joachim Wetzel

    4. Februar 2018 at 12:40 Antworten

    Guter Artikel, ist das der Standard CKE Editor Code Snippet Block oder haben Sie das selbst gebaut?

Einen Kommentar posten