CSS Grundlagen: Vertikale Navigation erstellen – So machst du deine Website benutzerfreundlicher

English

Vertikale Navigation erstellen und gestalten – ein umfassender Leitfaden

Eine Navigation sollte so konzipert sein, dass sowohl Benutzer als auch Suchmaschinen die wichtigsten Seiten der Website einfach finden können. Navigationen und Menüs gibt es in allen möglichen Formen und Farben. Die vertikale Navigation ist ein Menü, in dem die Links als vertikale Liste angezeigt werden. Dieser Menü-Typ ermöglicht eine übersichtliche Anzeige der Menüpunkte und sorgt für eine einfache Orientierung auf der Website.

Die vertikale Navigation hat einige Vorteile gegenüber der horizontalen Navigation. Dies gilt vor allem für komplexe Websites mit einer großen Anzahl von Unterseiten.

Grundlagen der vertikalen Navigation

Die vertikale Navigation wird häufig als linke oder rechte Seitennavigation (Englisch: Sidebar) der Webseite angezeigt.

Die ungeordnete Liste ist das semantisch korrekte HTML-Element für die vertikale Navigation, die aus einer Liste von Links besteht. Mit CSS können wir die Liste leicht anpassen, um eine eine ansprechend gestylte vertikale Navigation zu erhalten.

Es gibt im Wesentlichen zwei verschiedene Arten von Navigation, die sich jeweils für unterschiedliche Typen von Websites und Endgeräte eignen:

Grundlegendes Styling für die vertikale Navigation

Standardmäßig hat die ungeordnete Liste einen vertikalen Außenabstand (Margin) von 1em und links einen horizontalen Einzug (Padding) von 40px vor der Liste. Vor jedem Element der Aufzählung wird ein Bullet Point als Marker eingfügt.

Das Standard-Styling von UL ist für die Navigation nicht geeignet und muss geändert werden:

Default Einstellungen von UL für die Navigation

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

Das LI-Element ist standardmäßig ein Blockelement. Jedes Element der Liste beginnt deshalb in einer neuen Zeile.

Links zu Schaltflächen machen

Wir verwenden Custom Properties, um das Layout der Navigation zu definieren. Es ist allgemein üblich, Custom Properties für die Pseudoklasse :root zu definieren, so dass sie global referenziert werden können. Custom Properties werden stets mit -- eingeleitet. Auf diese Weise lässt sich die Navigation besonders komfortabel anpassen. Für den Zugriff auf benutzerdefinierte Eigenschaften wird die CSS-Funktion var(…) verwendet.

Um Schaltflächen zu erzeugen, wandeln wir den Link in ein Block-Element um. Dies hat den Vorteil, dass der gesamte rechteckige Bereich wie ein Button funktioniert und anklickbar oder antippbar ist, nicht nur der eigentliche Link.

Schaltflächen für die Navigation erzeugen, damit der gesamte Bereich wie ein Button reagiert, allerdings ohne Grafik.

Links als anklickbare Schaltflächen darstellen

:root {
  --vNavBG: #90ee90;
  --vNavFG: #000000;
  --vNavHoverBG: #90bb90;
  --vNavHoverFG: #ffffff;
}

nav li a {
  display: block;
  padding: 0.5em 1em;
  font-weight: bold;
  text-decoration: none;
  background: var(--vNavBG);
  color: var(--vNavFG);
}

nav li a:hover {
  background: var(--vNavHoverBG);
  color: var(--vNavHoverFG);
}

Vertikale Navigation gestalten

Die Gestaltung der vertikalen Navigation ist von zentraler Bedeutung für die Benutzerfreundlichkeit einer Webseite. Eine gut gestaltete Navigation muss übersichtlich aufgebaut sein und eine klare Struktur haben. Die Navigation muss gut lesbar und intuitiv bedienbar sein. Die grafische Darstellung durch Hintergründe und Schriftfarben sowie die Anordnung der Elemente und die Abstände zwischen ihnen sind hierbei entscheidend.

Styling für eine vertikale Navigation mit Schaltflächen

/* vertikale Navigation gestalten */
:root {
  --vNavWidth: 12em;
  --vNavBG: #cccccc;
  --vNavFG: #000000;
  --vNavHoverBG: #999999;
  --vNavHoverFG: #ffffff;
  --vNavLineColor: #ffffff;
  --vNavBorderColor: #000000;
  --vNavBorderWidth: 1px;
}

nav {
  margin: 0 0 0.5em 0;
  width: var(--vNavWidth);
  float: left;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: var(--vNavBorderWidth) solid var(--vNavBorderColor);
}

nav ul li {
  margin: 0;
  padding: 0;
  border-bottom: var(--vNavBorderWidth) solid var(--vNavLineColor);
}

nav ul li:last-child {
  border-bottom: none;
}

nav a {
  display: block;
  margin: 0;
  padding: 0.5em 1em;
  text-decoration: none;
  background: var(--vNavBG);
  color: var(--vNavFG);
}
nav a:hover {
  background: var(--vNavHoverBG);
  color: var(--vNavHoverFG);
}


/* Styles für den Dummy-Text */
#mainContent {
  margin-left: calc(var(--vNavWidth) + 1em);
}

#mainContent h2 {
  margin: 0 0 0.83em 0;
  padding: 0;
  font-size: 1.25em;
  color: #990000;
}

#mainContent p {
  color: #990099;
}

Vertikale Navigation erstellen

<nav>
<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Unsere Leistungen</a></li>
  <li><a href="#">Sonderangebote</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

<div id="mainContent">
<h2>Hauptinhalt der Seite</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum zzril delenit augue.</p>

<p>ad minim veniam, quis nostrud exerci tation ullamcorper nis laboris ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate.</p>
</div>

Vertikale Navigation mit Schaltflächen

Hauptinhalt der Seite

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum zzril delenit augue.

ad minim veniam, quis nostrud exerci tation ullamcorper nis laboris ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate.

     

Vertikale Full-Height Sidebar erstellen

Die horizontale Navigation ist heute Standad im Web-Design. Es ist aber noch gar nicht so lange her, dass bevorzugt die vertikale Navigation verwendet wurde. Die vertikale Navigation hat im Vergleich zur horizontalen Navigation eine Reihe von Vorteilen. Man findet sie meist als fixierte Navigation in der linken oder rechten Seitenleiste der Webseite.

Grundlage für die fixierte vertikale Navigation ist die CSS Anweisung position: fixed.

Mit den folgenden Anweisungen wird die Navigation in der linken Spalte des Layouts fixiert:

Basis-Styles für die fixierte vertikale Navigation

/* Einstellungen für die fixierte Navigation */
:root {
  --sideNavWidth: 12em;
  --sideNavBG: #cccccc;
  --sideNavFG: #000000;
}

nav {
  position: fixed;
  width: var(--sideNavWidth);
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
}


/* Standard-Style für die Hauptspalte (rechts) */
#mainContent {
  margin-left: calc(var(--sideNavWidth) + 1em);
}

Was muss man bei der fixierten vertikalen Navigation beachten?

Der folgende Beispiel-Code demonstriert wie eine fixierte vertikale Navigation gestaltet werden kann:

Styles für eine fixierte vertikale Navigation mit CSS-Buttons

/* fixierte vertikale Navigation gestalten */
:root {
  --sideNavWidth: 12em;
  --sideNavBG: #cccccc;
  --sideNavFG: #000000;
  --sideNavHoverBG: #999999;
  --sideNavHoverFG: #ffffff;
  --sideNavActiveBG: #04aa6d;
  --sideNavActiveFG: #ffffff;
  --sideNavLineColor: #ffffff;
  --sideNavBorderColor: #000000;
  --sideNavBorderWidth: 1px;
}

nav {
  position: fixed;
  margin: 0 0 0.5em 0;
  width: var(--sideNavWidth);
  height: 100%;
  top: 0;
  left: 0;
  background: var(--sideNavBG);
  border: var(--sideNavBorderWidth) solid var(--sideNavBorderColor);
  overflow-y: auto;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav ul li {
  margin: 0;
  padding: 0;
  border-bottom: var(--sideNavBorderWidth) solid var(--sideNavLineColor);
}

nav ul li:last-child {
  border-bottom: none;
}

nav a {
  display: block;
  margin: 0;
  padding: 0.5em 1em;
  text-decoration: none;
  color: var(--sideNavFG);
}

nav a:hover:not(.active) {
  background: var(--sideNavHoverBG);
  color: var(--sideNavHoverFG);
}

nav li a.active {
  background: var(--sideNavActiveBG);
  color: var(--sideNavActiveFG);
}

/* Styles für den Dummy-Text */
#mainContent {
  margin-left: calc(var(--sideNavWidth) + 1em);
}

#mainContent h2 {
  margin: 0 0 0.83em 0;
  padding: 0;
  font-size: 1.25em;
  color: #990000;
}

#mainContent p {
  color: #990099;
}

Vertikale Navigation erstellen

<nav>
<ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Unsere Leistungen</a></li>
  <li><a href="#">Sonderangebote</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

<div id="mainContent">
<h2>Hauptinhalt der Seite</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum zzril delenit augue.</p>

<p>ad minim veniam, quis nostrud exerci tation ullamcorper nis laboris ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate.</p>
</div>

Fixierte vertikale Navigation mit Schaltflächen

Hauptinhalt der Seite

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio qui blandit praesent luptatum zzril delenit augue.

ad minim veniam, quis nostrud exerci tation ullamcorper nis laboris ea commodo consequat. Duis autem vel eum iriure in hendrerit in vulputate.

     

Ändere die Größe des Browser-Fensters, um zu sehen, wie es sich auswirkt, wenn die rechte Content-Spalte mehr Inhalt hat und gescrollt werden muss.

Ein Element mit position: fixed wird aus dem normalen Textfluss herausgenommen und relativ zum Viewport positioniert. Die Werte für die Eigenschaften top, right, bottom und left bestimmen die Position des Elements. Beim Scrollen der Seite bleibt das auf diese Weise positionierte Element an seiner Position im Viewport.

Wenn die Sidebar aus dem letzten Beispiel nicht relativ zum Viewport, sondern relativ zu einem DIV fixiert werden soll, muss der CSS-Code so geändert werden:

Die erforderlichen Änderungen im CSS-Code gegenüber dem letzten Beispiel sind farblich hervorgehoben.

vertikale Navigation relativ zu einem DIV fixieren

/* fixierte Sidebar gestalten */
:root {
  --sideNavWidth: 12em;
  --sideNavHeight: 20em;
  --sideNavBG: #cccccc;
  --sideNavFG: #000000;
  --sideNavHoverBG: #999999;
  --sideNavHoverFG: #ffffff;
  --sideNavActiveBG: #04aa6d;
  --sideNavActiveFG: #ffffff;
  --sideNavLineColor: #ffffff;
  --sideNavBorderColor: #000000;
  --sideNavBorderWidth: 1px;
}

nav {
  display: block;
  margin: 0 0 0.5em 0;
  width: var(--sideNavWidth);
  height: var(--sideNavHeight);
  background: var(--sideNavBG);
  float: left;
  border: var(--sideNavBorderWidth) solid var(--sideNavBorderColor);
  overflow-y: auto;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav ul li {
  margin: 0;
  padding: 0;
  border-bottom: var(--sideNavBorderWidth) solid var(--sideNavLineColor);
}

nav ul li:last-child {
  border-bottom: none;
}

nav a {
  display: block;
  margin: 0;
  padding: 0.5em 1em;
  text-decoration: none;
  color: var(--sideNavFG);
}

nav a:hover:not(.active) {
  background: var(--sideNavHoverBG);
  color: var(--sideNavHoverFG);
}

nav li a.active {
  background: var(--sideNavActiveBG);
  color: var(--sideNavActiveFG);
}

/* Styles für den Dummy-Text */
#mainContent {
  margin-left: calc(var(--sideNavWidth) + 1em);
  max-height: var(--sideNavHeight);
  overflow: auto;
}

#mainContent h2 {
  margin: 0 0 0.83em 0;
  padding: 0;
  font-size: 1.25em;
  color: #990000;
}

#mainContent p {
  color: #990099;
}

Vertikale Navigation erstellen – Dein ultimativer Guide für ein benutzerfreundliches Design