Fullscreen Navigation Menu in Contao

Im folgenden Artikel wird die Einbindung einer mit jquery animierten fullscreen Navigation in Contao erklärt.

Aktuell bin ich dabei, meine Webseite zu überarbeiten. Das ist gerade bei Designern nicht immer einfach: Viele Webdesigner toben sich dann richtig aus, das Ergebnis ist nach meinem Empfinden aber nicht immer optimal: Technisch mag zwar alles perfekt ausgeklügelt sein, aber die Nutzbarkeit ist, gerade für weniger Internet-affine Nutzer, die aber wiederum die Zielgruppe sind, meist eingeschränkt.

Dennoch wollte ich bei meiner neuen Webseite einige schlichte, moderne, seltene, auffällige und einprägsame Dinge einbauen. Die Liste an Kriterien ist insofern lang gewesen. 😉

Einem dieser Elemente – dem wohl wichtigsten – möchte ich heute einen Beitrag widmen: Der Navigation. Ich habe mich hier für eine Vollbild-Navigation entschieden, da hier keine größeren Änderungen für die Mobilversion nötig sind (die ist quasi von Haus aus responsive), seeeeehr viel Platz (z.B. für große Icons, Action-Buttons, usw.) vorhanden ist und das Ganze nach meinem Empfinden auch sehr gut aussieht. Als Basis dient die „Full-Screen Pop-Out Navigation“ von codyhouse.co.

Um das Ganze in Contao zu implementieren, sind folgende Schritte nötig:

  1. Das Paket herunterladen und entpacken.
  2. In Contao im Seitenlayout einen eigenen Navigationsbereich hinzufügen; bei mir heißt er Navigation, die zugewiesene id ist entsprechend #Navigation
  3. Bevor es los geht, bearbeiten wir noch schnell die main.js und style.css aus dem Paket: Mit suchen&ersetzen ersetzen wir alle .cd-header durch #Navigation
  4. Nun laden wir die style.css und main.js in Contao hoch und binden sie unter Seitenlayout im Header ein:
  5. Im Seitenlayout aktivieren wir außerdem jquery.
  6. Jetzt legen wir eine neue Seite an, die wir im Menü verstecken. Hier werden wir unsere Navigation einfach als Textelement anlegen und hübsch stylen. Ich würde die Verwendung eines responsive grids oder der rocksolid columns empfehlen.
  7. Sobald das erledigt ist, legen wir ein neues html-Modul an, mit dem wir die Navigation, die aufgerufen wird, einbinden:
  8. Um den Button, mit dem die Navigation aufgerufen wird, einzubinden, legen wir ebenfalls ein html-Modul an. Ich habe dem Ganzen noch die Klasse .navbutton gegeben, um den Button in meiner #Navigation anordnen zu können:
  9. Als nächstes binden wir die Module im Seitenlayout ein. Den Button (7. Schritt) fügen wir in unseren unter 2. angelegten Navigationsbereich ein, die Navigation (6. Schritt) in der Hauptspalte.
  10. Das war es auch schon – die Navigation sollte nun nach einem Klick auf den Menü Button herunter fahren. Natürlich kann das .css noch etwas angepasst werden, nicht benötigte Elemente wie .cd-logo oder .cd-secondary-nav können entfernt werden.

Was mir dann noch nicht gefallen hatte war der Umstand, dass das Menü beim Klicken eines Ankerlinks offen geblieben ist. Das ist insbesondere bei Onepage-Webseiten sehr unpraktisch. Ich habe daher die main.js wie folgt angepasst, um die Navigation beim Anklicken eines Links zu schließen:

 

 

Jonathan

Jurist, Freizeit-Nerd, Webdesigner und Inhaber von jst-media.de

One thought to “Fullscreen Navigation Menu in Contao”

  1. Hallo Jonathan, danke für deine tolle Anleitung, ich habe sie sehr schnell für eine neue HP umsetzen können..
    Leider funktioniert das Script aber nicht auf meiner Kontaktseite mit integrierter Google-Maps Karte! Hast Du da vielleicht einen Tip wie man das Script dort auch zum laufen bekommt??

Schreibe einen Kommentar

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