Vertikale Navigation Teaser

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:

Vertikale Navigation, fixiert am Seitenrand

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.

Vertikale Navigation VW

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:

See the Pen Fixierte, vertikale Navigation in Contao by Dennis Erdmann (@erdmannfreunde) on CodePen.

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.


Vertikale Navigation für One-Pager

Auch auf „One-Pagern“ oder sogenannten „Scrollytelling“-Websites, bei denen durch scrollen Seiteninhalte animiert werden, kommen fixierte, vertikale Navigationen häufig zum Einsatz. Man sieht sie dann oft als am linken oder rechten Rand platzierte Punkte, die die einzelnen Seitenbereiche symbolisieren und als Sprungmarken genutzt werden können. Bei :hover werden dann noch zur besseren Orientierung die Menüpunktnamen eingeblendet, so wie bei der Produktseite für den Mac Pro.

Onepager Apple

Um eine solche One-Pager-Navigation zu realisieren braucht ihr zunächst eine Contao-Extension, die euch das Menü erstellt. Wir haben dafür vor einiger Zeit mal die Erweiterung One-Page-Website genutzt, zu der es auch eine gute Dokumentation im Contao-Wiki gibt. Im folgenden Tutorial zeigen wir euch, wie ihr mit der One-Page-Website-Erweiterung und ohne Template-Anpassungen einen ähnlichen Effekt erzeugen könnt.

Navigation fixieren

Um eure Navigation zu fixieren, verwenden wir wie im ersten Beispiel die Anweisung position: fixed und sorgen dafür, dass die Navigation die komplette Höhe des Bildschirms ausnutzt:

.nav--fixed {
  position: fixed;
  height: 100%;
}

Navigation vertikal zentrieren

Mit dem folgenden CSS-Anweisungen sorgt ihr dafür, dass die <ul> mittig von der Website angezeigt wird:

.nav--fixed ul {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Die top-Anweisung verschiebt die Liste um 50% der verfügbaren Höhe nach unten. Mit transform: translateY(-50%) wird die eigene Höhe der Liste berücksichtigt und durch den negativen Wert von 50% wieder ausgeglichen. In modernen Browsern ist die Navigation nun perfekt vertikal zentriert (Browser-Prefixe berücksichtigen, im IE ab Version 10).

Text ausblenden und Punkte anzeigen

Den Text blenden wir über font-size: 0 aus, um ihn bei :hover (und mithilfe einer CSS3-Animation) wieder einblenden zu können. Außerdem geben wir dem Text noch ein wenig Abstand, da wir die Kreise absolut positionieren. Die Kreise fügen wir mithilfe des Pseudo-Elements :before und durch den Einsatz von border-radius hinzu:

.nav--fixed li a {
   font-size: 0;
   padding-left: 25px;
}

.nav--fixed li a:before {
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: absolute;
  top: 0;
  left: 0;
  vertical-align: middle;
}

Text bei :hover einblenden

Zu guter Letzt setzen wir bei :hover und :focus die Schriftgröße wieder auf den Ursprungswert:

.nav--fixed li a:hover,
.nav--fixed li a:focus {
   font-size: inherit;
}

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

See the Pen Vertikale Navigation für One-Pager in Contao by Dennis Erdmann (@erdmannfreunde) on CodePen.

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.

Unser Fazit:

Vertikale Navigationen sind zwar in den letzten Jahren etwas aus der Mode gekommen, aber als fixierte Variante können sie einer Website nicht nur einen „frischen Anstrich“ geben, sondern auch tatsächlich die Bedienung einer Website verbessern.

Dennoch werden vertikale Navigationen auch bei uns weiterhin eher die Ausnahme, als die Regel sein. Ein großen Comeback der vertikalen Navigation erwarten wir eher nicht.

Kommentare

Was ist die Summe aus 5 und 4?