Contao (Teil 10): Das Hauptmenü anlegen und einbinden

Bislang wurden einige Seiten im Backend angelegt. Im Frontend ist davon, bis auf die Startseite, allerdings noch nichts zu sehen. Tatsächlich müssen zunächst nämlich Menüs erstellt werden. In diesem Tutorial werdet ihr das Hauptmenü definieren und im Frontend verfügbar machen.

Wir empfehlen:
Contao CMS-Training

Unter Layout>Seitenstruktur sind alle bislang angelegten Seiten zu sehen.

Diese Seiten sollen nun ins Frontend der Seite in ein Menü aufgenommen werden. Auch auf diesem Gebiet ist Contao äußerst flexibel und macht die ganze Sache denkbar einfach.

In Contao werden Menüs über Module erstellt. Und diese Module lassen sich anschließend ins gewünschte Seitenlayout einbinden.

Ein Modul erstellen

Im ersten Schritt muss man also ein Modul für das Menü erstellen. Ruft dazu im Backend Layout>Themes auf. In der daraufhin angezeigten Theme-Übersicht klickt ihr in der Zeile des betreffenden Themes auf das Symbol Die Frontend-Module des Themes ID XX bearbeiten.

Legt über den gleichnamigen Link ein Neues Modul an. In dem sich öffnenden Dialogfenster werden allgemeine Angaben zum Modul erwartet. Als Titel könnt ihr Hauptnavigation eingeben. Im Feld Überschrift ist keine Angabe notwendig. Entscheidend ist allerdings das Feld Modultyp. Überprüft, ob in diesem Feld tatsächlich der Eintrag Navigationsmenü eingestellt ist.

Ausführliche Informationen zu den einzelnen Menütypen, die im Feld Navigationsmenü ebenfalls aufgeführt sind, gibt es im weiteren Verlauf dieses Tutorials.

Die übrigen Einstellungen in dem Dialogfenster kann man unverändert mit Speichern und schließen übernehmen. Damit ist das Modul erstellt. Nun muss man es allerdings noch in das Seitenlayout einbinden. Ohne dieses Einbinden ist das Menü nämlich nicht im Frontend zu sehen.

Öffnet Layout>Themes und klickt auf das Symbol Die Seitenlayouts des Themes ID xx bearbeiten. In dem sich öffnenden Dialogfenster klickt ihr auf das Stiftsymbol des betreffenden Seitenlayouts. Im Dialogfenster Datensatz ID xx bearbeiten ist der Bereich Eingebundene Module interessant. Klickt dort auf das Plussymbol eines beliebigen Feldes.

Dieses Feld wird kopiert. Bei der Kopie stellt man nun im linken Auswahlfeld Hauptnavigation ein. Im Feld unter Spalte wählt man hingegen Linke Spalte.

Die übrigen Einstellungen können unverändert mit Speichern und schließen übernommen werden. Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Das Menü wird in Form einer ungeordneten Liste angezeigt, die dann natürlich formatiert werden kann.

<nav class="mod_navigation block">
<a href="#skipNavigation9" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="active first"><span class="active first">Startseite</span></li>
<li class="sibling"><a href="index.php/downloads.html" title="Downloads" class="sibling">Downloads</a></li>
<li class="sibling"><a href="index.php/kontakt.html" title="Kontakt" class="sibling">Kontakt</a></li>
<li class="sibling last"><a href="index.php/impressum.html" title="Impressum" class="sibling last">Impressum</a></li>
</ul>
<a id="skipNavigation9" class="invisible">&nbsp;</a>
</nav>

In diesem Zusammenhang spielen die Templates eine entscheidende Rolle. Diese legen letztendlich fest, wie die Ausgabe im Frontend erfolgt. Die Templates liegen in den entsprechenden Unterverzeichnissen von system/modules. Darin besitzt jedes Modul ein eigenes Unterverzeichnis.

Um das Hauptmenü tatsächlich anpassen zu können, muss man die HTML-Struktur verstehen. Grund genug, darauf einen etwas ausführlicheren Blick zu werfen.

Umschlossen ist das Menü vom HTML5-Element nav. Dieses Element ist, wie so vieles in HTML5, dafür da, einen bestimmten Bereich semantisch korrekt auszuzeichnen. Im Fall von nav werden Menüs markiert.

Dem nav-Element werden die beiden Klassen mod_navigation und block zugewiesen.

Am Anfang und am Ende des Menüs gibt es jeweils einen Skip-Link, der mit der Klasse invisible gekennzeichnet ist.

Dem aktiven Menüeintrag ist die Klasse active zugewiesen. Somit kann man diesen Menüpunkt ganz gezielt hervorheben.

Gleiches gilt dann übrigens auch für den ersten und den letzten Menüeintrag, welche die Klasse first bzw. last besitzen.

Verantwortlich für die Ausgabe des Menüs ist die Datei system/modules/core/templates/mod_navigation.html5. Nun könnte man, wenn Änderungen an der Menü-HTML-Struktur gewünscht sind, diese direkt in dieser Datei vornehmen. Das Problem dabei: Beim nächsten Contao-Update werden diese Änderungen wieder überschrieben. Contao bietet jedoch auch hierfür einen Ausweg.

Dazu ruft man im Backend Layout>Templates auf. Im oberen Fensterbereich klickt man auf Neues Template. In dem sich öffnenden Dialogfenster werden zwei Auswahlfelder angeboten. Im oberen der beiden Felder stellt man mod_navigation.html5 ein. Als Zielverzeichnis wird psd-theme eingestellt.

Bestätigt werden die Angaben mit Template erstellen. Das neu erstellte Template ist daraufhin in der Template-Übersicht zu sehen.

Außerdem legt Contao die entsprechende Template-Datei unter templates/psd-theme an. Contao überprüft bei jedem Seitenaufruf, ob in diesem Verzeichnis eine passende Template-Datei vorhanden ist. Wird das System fündig, nimmt es diese Datei, anderenfalls wird auf die Core-Dateien zurückgegriffen. Vorteil dieser Variante: Die vorgenommenen Einstellungen sind auch nach einem Update von Contao unverändert verfügbar.

Noch mehr Menütypen

In diesem Tutorial wurde ein normales Navigationsmenü erstellt, dessen Einträge mittels ungeordneter Liste untereinander angezeigt werden. Tatsächlich bietet Contao aber noch eine Vielzahl anderer Menüvarianten. Welche das letztendlich sind, kann man sich anzeigen lassen, indem man Layout>Themes aufruft, auf Die Frontend-Module des Theme ID xx bearbeiten klickt und ein Neues Modul anlegt. Entscheidend ist dann das Feld Modultyp. In diesem Auswahlfeld gibt es unterhalb von Navigation zahlreiche Einträge.

Und jeder dieser Einträge steht für eine andere Menüvariante. Interessant ist hier beispielsweise Navigationspfad. Denn darüber kann man ein sogenanntes Brotkrumen-Menü erstellen. Eingesetzt wird dieses hauptsächlich bei sehr stark verschachtelten Seitenstrukturen.

Wählt man Individuelle Navigation, kann man explizit angeben, welche Seiten tatsächlich im Menü erscheinen sollen. Dazu klickt man auf Auswahl ändern und stellt die gewünschten Seiten ein.

Wer das Menü anstelle einer Aufzählungsliste in einem Auswahlfeld anzeigen will, wählt den Wert Quicknavigation.

In diesem Feld kann dann der gewünschte Menüpunkt ausgewählt und mit OK bestätigt werden. Ähnlich arbeitet übrigens Quicklink, nur kann man hier eben explizit die Seiten auswählen, die im Menü zu sehen sein sollen.

Die Variante Buchnavigation ist vor allem interessant, wenn man beispielsweise Online-Handbücher usw. veröffentlichen will. Denn dank der Buchnavigation kann man sich durch die Seiten tatsächlich wie durch ein Buch vor- und zurücknavigieren.

Die Artikelnavigation ist mit der Buchnavigation vergleichbar. Interessant ist diese, wenn auf einer Seite mehrere Artikel enthalten sind, die mit Teasertexten arbeiten. Durch diese Artikel kann man sich dann ebenfalls wie durch ein Buch bewegen.

Und dann gibt es noch den Punkt Sitemap. Dieser stellt die Seiten des Projekts in einer ungeordneten Liste dar. Geeignet ist diese Variante natürlich in erster Linie, um den Seitenbesuchern einen entsprechenden Überblick zu liefern.

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