5 Inspirationen für eure nächste Contao-Navigation

In den Teilen 9-11 hatten wir euch bereits Beispiele für horizontale, vertikale und Dropdown-Navigationen in Contao vorgestellt. Für den 12. Teil unserer Artikelserie haben wir euch nach weiteren interessanten und mit Contao realisierten Navigationskonzepten gefragt.

Als ich für diesen Artikel mit der Recherche begann, stellte ich schnell fest, dass es gar nicht so einfach ist, neue und interessante Navigationen und Navigationskonzepte zu finden, die über die bisherigen Kategorien „horizontal“, „vertikal“, „Dropdown“ hinausgehen.

An dieser Stelle vielen dank an Cliff Parnitzky, Edgar Selting, Harry Boldt und Phil-Bastian Berndt, die mir Tipps und Denkanstöße gegeben haben. So sind noch mal 5 weitere Contao-Navigationen zusammengekommen, von denen man zu Anfang nicht denken würde, dass sie sich „so leicht“ mit Contao realisieren lassen.

Vielleicht ist ja auch die ein oder andere Inspiration für eurer nächstes Webprojekt dabei.

1. Off-Canvas-Navigation

Nicht nur für Smartphones und Tablets

Wir kennen sie vor allen Dingen von mobilen Geräten, aber ab und zu finden wir sie auch auf Websites, wo eigentlich genügend Platz für eine horizontale Navigation wäre.

Aber das ist nicht das einzige, was diese Off-Canvas-Navigation auszeichnet: Sie wurde komplett mit CSS3 und ohne Javascript realisiert.

Dass diese Off-Canvas-Navigation auch ohne JS funktioniert, haben wir dem Input-Element Checkbox zu verdanken. Über input:checked ~ .nav--offcanvas lassen sich der Navigation andere CSS-Anweisungen geben, wenn die Checkbox aktiviert ist. Die Checkbox ersetzt also den Button, den man in sonstigen Off-Canvas-Navigationen meist findet.

2. Fly-Out-Navigation

Pendant zur Dropdown-Navigation

In Teil 10 haben wir euch die fixierte, vertikale Navigation vorgestellt. Bei der Fly-Out-Navigation wird diese ähnlich wie bei der Dropdown-Navigation um eine 2 Ebene ergänzt.

3. Breadcrumb-Dropdown-Navigation

Breadcrumb mit mehr Möglichkeiten

Die Breadcrumb-Dropdown-Navigation haben wir ursprünglich zur besseren Navigation durch einen Produktkatalog entwickelt, den wir mit MetaModels realisiert haben. Sie lässt sich theoretisch aber auch innerhalb einer größeren Website mit mehreren Ebenen einsetzen.

In der Demo habe ich die einfachste Version mit :hover und demonstriert. Die Breadcrumb besteht aus insgesamt 3 Dropdown-Navigationen, die per float nebeneinander angeordnet werden. Den aktuellen Seitennamen, den Namen der übergeordneten Seite sowie der Name der übergeordneten Hauptseite könnt ihr über die Inserttags

{page::title}
{page::parentTitle}
{page::mainTitle}

(jeweils in doppelten, geschweiften Klammern) auslesen und in das jeweilige Überschriftenfeld einfügen.

Weitere Ideen:
Über Javascript könntet ihr die Dropdowns per Click öffnen lassen. Und mit kleinen Template-Anpassungen könntet ihr die Pfeile (franz. Anführungszeichen) zwischen den Dropdown-Menüs durch Links ersetzen, so dass man über sie eine Ebene höher gelangt. So kämen sie der Funktion einer echten Breadcrumb-Navigation noch näher.

4. Buchnavigation in 2015

Schnelles Blättern durch Referenzen

Für diese Art der Navigation habe ich weder einen Namen gefunden, noch ist mir ein anderer eingefallen, als der in Contao verwendete Name „Buchnavigation“. Buchnavigationen sehen normalerweise eher langweilig aus. Aber diese Buchnavigation wurde für das Jahr 2015 angepasst und macht es dem Nutzer einfacher, sich durch beispielsweise Referenzen oder sogar die ganze Seite zu navigieren.

Nachteil: Ganz ohne Template-Anpassungen geht es leider nicht, wenn ihr die Pfeile über einen Icon-Font realisieren wollt. Denn die bisherigen Pfeile sind im Standard-Template als Sptize Klammern < und > eingebaut.

5. Slide-In-Fixed-Navigation

Rückkehr als vereinfachte Navigation

Um den Besucher der Website besser führen zu können, setzen ein paar Websites eine vereinfachte, fixierte Version ihrer Navigation ein, wenn die eigentliche Navigation nicht mehr zu sehen ist oder wenn der Nutzer wieder nach oben scrollt.

Einziger Nachteil: Um eine solche Navigation umzusetzen, benötigt man Javascript-Kenntnisse. Im Beispielcode findet ihr ein paar Zeilen JS, die ich mit meinem rudimentären JS-Wissen für jQuery zusammengeschrieben habe.

Dank an Edgar, der mir ein Beispiel zur Verfügung gestellt hat.