Contao (Teil 19): Ein vertikales Menü aufbauen

Tutorials 23. August 2013 – 0 Kommentare

Bislang wurde lediglich ein Hauptmenü in die linke Seitenspalte eingebunden. Das ist so natürlich für den Anfang völlig in Ordnung. Früher oder später werdet ihr aber möglicherweise auch ein vertikales Menü haben wollen, das sich über zwei Ebenen erstreckt. Und genau darum, wie man ein solches Menü aufbauen kann, geht es in diesem Tutorial.

Wir empfehlen:
Contao CMS-Training

Bevor gezeigt wird, wie sich ein vertikales Menü mit Untereinträgen aufbauen lässt, zunächst ein allgemeiner Blick auf die in Contao verfügbaren Navigationsmodule. Will man in Contao Menüs oder ganz allgemein Navigationsstrukturen aufbauen, geschieht das anhand von Modulen. Um euch anzusehen, was Contao hier alles zu bieten hat, ruft ihr Layout/Themes/Die Frontend-Module des Themes ID xx bearbeiten auf und klickt auf Neues Modul. Entscheidend ist das Feld Modultyp.

Wenn ihr euch die Einträge dieses Feldes anseht, fallen dort Navigation und dessen zahlreiche Untereinträge auf.

Das sind die Einträge, mit denen man es zu tun bekommt, wenn es um den Aufbau von Navigationsmenüs in Contao geht. Das Modul, mit denen man dabei aber zweifellos am häufigsten in Berührung kommt, ist Navigationsmenü. Denn hierüber kann man auf Basis der unter Layout/Seitenstruktur vorhandenen Einträge Menüs aufbauen. Um diesen Modultyp geht es dann übrigens auch im weiteren Verlauf dieses Tutorials.

Interessant sind aber natürlich auch die anderen Einträge. So will man beispielsweise auf Webseite oftmals ein Menü aufbauen, in dem lediglich die Punkte Startseite, Kontakt, Impressum, Über uns usw. zu sehen sind. Für so etwas greift man auf den Modultyp Individuelle Navigation zurück. Denn hier kann man explizit die Seiten auswählen, die im Menü zu sehen sein sollen.

Wer sich bzw. seinen Besuchern eine Übersicht aller vorhandenen Seiten präsentieren will, greift zu Sitemap. Hier werden dann tatsächlich alle Seiten berücksichtigt, die veröffentlicht und nicht versteckt wurden.

Interessant ist auch das Modul Quicknavigation. Denn darüber lässt sich ein Auswahlfeld erstellen, über das die Besucher zu den gewünschten Seiten navigieren können.

Je nachdem wie umfangreich eure Seitenstruktur ist, kann der Modultyp Navigationspfad interessant sein. Darüber lassen sich die sogenannten Brotkrumenmenüs erstellen. So sehen die Besucher immer sofort, an welcher Stelle der Webseite sie sich momentan befinden.

Und dann gibt es noch die beiden Varianten Buchnavigation und Artikelnavigation. Beide Module stellen eine Pagination zur Verfügung, über die vor und zurück navigiert werden kann. Die eine Variante gilt dabei für Seiten, während die andere für Artikel verwendet wird.

Probiert die verschiedenen Module einfach mal aus. An dieser Stelle – wie bereits beschrieben – steht das Navigationsmenü im Vordergrund.

Die Menüstruktur aufbauen
Wenn ihr die bisherigen Contao-Tutorials gelesen habt, ist euch dort ein Menü aufgefallen.

In diesem Menü sind sämtliche Einträge zu sehen. Nun kann es aber natürlich durchaus sein, dass ihr deutlich mehr Menüeinträge habt. Und diese sollen dann hierarchisch angeordnet sein. Um die Einstellungen, die in diesem Tutorial beschrieben werden, auch praktisch nachvollziehen zu können, solltet ihr die Seitenstruktur erweitern. Legt dazu auf der Ebene, auf der momentan Impressum, Kontakt usw. liegen, die Seite Tutorials an.
Direkt darunter werden einige zusätzliche Seiten hinzugefügt. Die Struktur könnte dann folgendermaßen aussehen:

Impressum
Kontakt
Tutorials
–2D
–3D
–Fotografie
–Web
–Mediengestaltung

Wie sich Seiten anlegen lassen, wurde bereits beschrieben. Wollt ihr nun die Seite 2D als Unterseite von Tutorials anlegen, öffnet ihr unter Seitenstruktur den Punkt Neue Seite und klickt in der Zeile Tutorials auf den nach rechts zeigenden Pfeil. Achtet in jedem Fall darauf, die Seiten auch tatsächlich zu veröffentlichen.

Abschließend sollte die Seitenstruktur so aussehen:

Wenn ihr euch anschließend das Frontend der Seite anseht, sind darin bereits die neu hinzugekommenen Seiten zu erkennen.

Das Problem momentan: Tatsächlich zeigt Contao jetzt alle Untereinträge von Tutorials direkt an, was so normalerweise nicht gewollt ist. Meistens möchte man die Untereinträge nämlich erst einblenden, wenn auf den übergeordneten Menüeintrag geklickt wurde.

Das Modul anpassen
Damit das funktioniert, müssen einige Einstellungen an dem Modul vorgenommen werden, welches für die Darstellung des Menüs im Frontend der Seite verantwortlich ist. Ruft dazu Layout/Themes auf und klickt auf Die Frontend-Module des Themes ID xx bearbeiten. Daraufhin bekommt ihr eine Übersicht der bislang von euch angelegten Module zu sehen. Öffnet hier das Modul Hauptnavigation [Navigationsmenü].

In dem sich öffnenden Dialogfenster sind drei Optionen entscheidend.

Zunächst einmal wäre da das Feld Startlevel.

Hierüber bestimmt man, ab welcher Ebene die Menüpunkte angezeigt werden sollen. Die interne Zählung dieser Ebenen beginnt dabei bei 0. Die oberste Ebene ist also 0. Im aktuellen Fall belasst ihr diesen Wert exakt so.

Weiter geht es mit dem Feld Stoplevel.

Darüber wird die Ebene bestimmt, bis zu der Menüeinträge angezeigt werden sollen. Durch den Standardwert 0 sind tatsächlich alle Ebenen zu sehen. Soll nur die erste Ebene sichtbar sein, stellt man eine 1 ein. Klickt man einen Menüeintrag an, werden dann dessen Untereinträge angezeigt.

Mit dem Feld Hard Limit kann man die Anzeige von Untereinträgen explizit unterdrücken. Die Untereinträge werden auch dann nicht angezeigt, wenn auf einen übergeordneten Eintrag geklickt wird.

Im aktuellen Beispiel sollen die Untereinträge von Tutorials nach Anklicken dieses Menüeintrags zu sehen sein. Dafür werden folgende Einstellungen vorgenommen:

  • Startlevel = 0
  • Stoplevel = 1
  • Hard Limit = Nicht aktivieren

Nehmt diese Einstellungen vor und übernehmt sie mit Speichern und schließen.

Das Stylesheet definieren
Die Vorarbeiten sind damit abgeschlossen und das Menü funktioniert jetzt eigentlich schon wie gewünscht. Nun ist es natürlich so, dass man das Menü noch gestalten kann. Contao stattet dazu die Menüeinträge jeweils mit ganz bestimmten Klassen und IDs aus.

Dem Navigationsmenü selbst wird die Klasse mod_navigation zugewiesen. Die Navigationsebenen erkennt man an Klassen nach dem Typ level_x, wobei das x dann jeweils durch die Ebenenziffer ersetzt wird. Die zweite Ebene besitzt demnach die Klasse level_2. Contao kennzeichnet außerdem explizit den ersten (first) und den letzten (last) Menüeintrag. Den aktiven Menüpunkt spricht man über .active an.

Mit diesem Wissen ausgestattet kann man das Menü und die darin enthaltenen Untereinträge gestalten.

#left .mod_navigation .level_2 a {
  margin-left; 12px;
  font-size: 13px;
  color; red;
  text-decoration:none;
  }
  #left .mod_navigation .level_2 a:hover,
  #left .mod_navigation .level_2 a:focus{
  color:green;
  }

  #left .mod_navigation .level_2 span.active{
  font-weight:bold;
  }

Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training

Schreibe einen Kommentar

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

Folgende HTML-Elemente sind erlaubt:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>