Vertikale Navigationen in Contao

Vertikale Navigationen werden seit ein paar Jahren immer weniger in Websites eingesetzt. Gerade als Hauptnavigation findet man sie nur noch selten. Wir wollen in diesem Teil ein Blick auf mögliche Einsatzszenarien werfen und euch zeigen, wie ihr diese in Contao realisieren könnt.

Im letzten Teil des CSS-Kurses über horizontale Navigationen in Contao hatte ich bereits erwähnt, dass vertikale Navigationen in den Anfangszeiten des Webdesign der Standard waren. In den 10 Jahren wurden sie aber mehr und mehr von ihren horizontalen Kollegen abgelöst.

Entschließt sich ein Designer doch dazu, eine vertikale Navigation zu verwenden, dann meist als Unternavigation, die in einer Seitenspalte platziert wird oder als Subnavigation in einer Dropdown-Navigation zum Einsatz kommt. Auch im Footer findet man gerade bei umfangreicheren Websites gerne eine Kombination aus horizontaler und vertikaler Navigation.

Viele vertikale Navigationen – speziell wenn sie als Subnavigationen eingesetzt werden – sind langweilig. Deswegen wollte ich das Thema eigentlich schon überspringen.

Aber als ich mir ein paar unserer letzten Projekte anschaute, fand ich dann doch zwei vertikale Navigationen, die ich so erst gar nicht auf dem Schirm hatte. In den beiden nachfolgenden Beispielen wollen wir euch demonstrieren, dass vertikale Navigationen durchaus sinnvoll sein können und zeigen euch, wie ihr diese in Contao realisieren könnt:

Wie schon erwähnt werden vertikale Navigationen, gerade bei Hauptnavigationen nur noch selten eingesetzt. Erst in den letzten 1-2 Jahren habe ein paar Designer die Liebe zur vertikalen Navigation wiederentdeckt. Man findet sie dann als fixierte Navigation am linken oder rechten Seitenrand wieder. Websites wie die Showroom-Sites von Volkswagen erhalten dadurch ein „Webapp“-artiges Aussehen.

Aber natürlich lässt sich die fixierte, vertikale Navigation auch für Nicht-Webapps einsetzen. Wir setzen sie zum Beispiel gerade bei einer Website für einen Fotografen ein (derzeit noch in Entwicklung).

Grundlagen einer fixierten Navigation

Das Grundprinzip einer fixierten, vertikalen Navigation beruht auf der CSS-Anweisung position: fixed. Durch den Wert fixed wird das Element – genauso wie bei position: absolute – aus dem Textfluss genommen. Das bedeutet, es legt sich über die anderen Elemente und es wird auch kein Platz mehr für das Element freigehalten.

Das Naheliegendste ist eigentlich, die Navigation in der linken Spalte im Seitenlayout von Contao abzulegen. Es gibt aber zwei gute Gründe, dies nicht zu tun: Bedienbarkeit & Suchmaschinen.

Für den Nutzer, aber auch für die Suchmaschinen sollte die Navigation innerhalb der HTML-Struktur so früh möglich kommen. Würden wir die Navigation in der linken Spalte des Seitenlayouts ablegen, müssten Nutzer, die einen Screenreader oder Tabs zum navigieren nutzen, sich erst durch die Hauptspalte arbeiten, bevor sie bei der Navigation angekommen sind. Deshalb solltet ihr die Navigation auf jeden Fall im <header> ablegen. Eine Verwendung des <header>-Elements als linke Spalte ist auch mit Blick auf die HTML5-Spezifikationen unbedenklich.

Mit folgenden Anweisungen könnt ihr eure Navigation am linken Seitenrand fixieren:

[id="header"] {
   position: fixed;
   height: 100%;
   width: 180px;
}

[id="container"] {
   margin-left: 180px;
}

Was müsst ihr bei einer fixierten, vertikalen Navigation beachten?

1. eure Hauptspalte sollte mit margin-left soweit eingerückt werden wie die fixierte Navigation breit ist. Andernfalls wird der Inhalt überdeckt
2. ihr solltet der fixierten Navigation eine feste Breite geben (siehe Punkt 1)
3. mit overflow-y: visible könnt ihr sicher stellen, dass die Navigation auch bedienbar ist, wenn die Bildschirmhöhe geringer ist als die Höhe der Navigation

Hier ein Beispiel wie eine solche Navigation mit Contao aussehen könnte:

Vorteil:

Da die meisten Monitore heutzutage das Format 16:9 haben, eine Website allerdings vertikal aufgebaut ist, entstehen oft große ungenutzte Flächen. Mit einer vertikalen Navigation lässt sich so gesehen die Bildschirmfläche besser ausnutzen.

Nachteil:

Eine fixierte, vertikale Navigation funktioniert nur so lange gut, wie wir die Website auf einem großen großen Bildschirm im Querformat ansehen. Für Tablets im Hochformat und Smartphones ist die fixierte, vertikale Navigation daher nicht geeignet. In diesem Fall könnte man jedoch überlegen, sie als Off-Canvas-Navigation bei Bedarf einzublenden.

Mit CSS3-Transitions könnt ihr dann ein wenig Animationen in die Navigation bringen, so wie in unserem Beispiel:

Der größte Vorteil einer One-Pager-Navigation gegenüber anderen Navigationen ist sicherlich, dass sie nicht notwendig ist. Sie dient dem Nutzer zur besseren Orientierung auf der Website und er kann so gezielt bestimmte Bereiche aufrufen. Wenn er sie allerdings übersieht oder nicht versteht, kann er genauso gut auf der Seite scrollen, um zum Ziel zu kommen. Dementsprechend haben wir auch keine Nachteile von One-Pager-Navigationen finden können.