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:
-
Die globale Navigation ist auf allen Seiten der Website identisch. Sie enthält Links zu den wichtigsten Seiten der Website und bietet dem Benutzer eine konsistente Möglichkeit für den Zugriff auf Unterseiten.
-
Die hierarchische Navigation ist kontextbezogen. Sie ändert sich je nach Seite, auf der sie angezeigt wird. Diese Art der Navigation ist besonders für Websites mit vielen Seiten und zahlreichen Kategorien zu empfehlen.
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.
Link zu einer Schaltfläche machen
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
nav li a {
display: block;
padding: 0.5em 1em;
font-weight: bold;
text-decoration: none;
background: #90ee90;
color: #000000;
}
nav li a:hover {
background: #90bb90;
color: #ffffff;
}
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 */
nav {
margin: 0 0 0.5em 0;
width: 12em;
float: left;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #000000;
}
nav ul li {
margin: 0;
padding: 0;
border-bottom: 1px solid #ffffff;
}
nav ul li:last-child {
border-bottom: none;
}
nav a {
display: block;
margin: 0;
padding: 0.5em 1em;
text-decoration: none;
background: #cccccc;
color: #000000;
}
nav a:hover {
background: #999999;
color: #ffffff;
}
/* Styles für den Dummy-Text */
#mainContent {
margin-left: 13em;
}
#mainContent h2 {
margin: 0 0 0.83em 0;
padding: 0;
font-size: 1.25em;
color: #990000;
}
#mainContent p {
color: #990099;
}
Vertikale Navigation erstellen
<h2>vertikale Navigation als linke Sidebar erstellen</h2>
<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>