Blog Design HowTo III – Top Navigation

Top Navigation

Übersicht der Serie:

1. Header
2. Content Box
3. Top Navigation
4. Sidebar
5. Headlines und Formatierungen
6. Comments
7. Footer
8. Werbung

Die Navigations- oder Linkleiste ist eine immer wieder an der gleichen Stelle einer Website erscheinende zentrale Navigationsmöglichkeit (Top-Navigation, globale Navigation, primary navigation). Über diese, auch als Menüleiste bezeichnete Seitennavigation, kann der Besucher alle Unterseiten einer Homepage erreichen. Sie dient wie in einem Buch gleichzeitig als stets sichtbares Inhaltsverzeichnis. Die Navigationsleiste wird meist links oben im Browserfenster positioniert.

Es ist wichtig, die Navigationsleiste auf allen Seiten an der gleichen Stelle zu positionieren. Nur so ermöglichen Sie es dem Benutzer, diese ohne Verwirrung schnell wieder zu finden.

Einer horizontalen Navigationsleiste ist in diesem Fall nur eine maximal der Seitenbreite entsprechende Größe gegeben. Man sollte generell aber im Schnitt nur 7 Menüpunkte für die Top-Navigation verwenden. Abhängig von der Komplexität, kann eine Navigationsleiste auch Unterkategorien (Submenüs) in Form einer aufklappbaren Menüleiste (Drop-Down Liste) enthalten. Hierbei öffnet sich beim Überfahren mit dem Mauscursor eine weitere, meist vertikale Linkliste. Diese können dann die Secondary Navigation bilden.

Oft ist es nötig, verschiedene Navigationsfunktionen voneinander zu unterscheiden. Beispielsweise kann bei einem Onlineshop die eine Navigationsleiste das Angebot (z.B. links positioniert) beinhalten, während eine zweite (z.B. oben oder rechts positioniert) zu den AGB, Kontakt oder Zahlungsoptionen verweist. Man sollte auch hier wie stets beim Erstellen von Websites darauf achten, dass mit dem Umfang der Links nicht die Übersichtlichkeit verloren geht.

Grundsätzlich sollte die Navigationsfunktion dem Besucher folgendes klarmachen:

Welche Themen beinhalten die einzelnen Unterseiten?
Wo befindet er sich aktuell?
Was ist das Thema der aktuellen Seite?
Von welcher Seite kam er und wie kommt er dahin zurück?
Kann er den aktuellen Standort in einen größeren Kontext einordnen?
Was für Möglichkeiten hat er, vom aktuellen Standort aus zu anderen Bereichen zu wechseln?
Sind diese Optionen deutlich gekennzeichnet?

Es gilt die Navigationsmenüs einfach bedienbar zu gestalten. Niemand besucht Ihre Seite, weil er sich für Ihre komplizierte Navigationsleiste interessiert, sondern um schnell informiert zu werden.

Wie erstellt man eine Navigationsleiste?

Es gibt verschiedene Möglichkeiten dem Besucher eine Navigation innerhalb der eigenen Website zu ermöglichen. Die beiden sinnvollsten sind das einfache Textmenü und die Verlinkung von Grafiken.

Textnavigationsleiste
Zwar sind die Gestaltungsmöglichkeiten bei einem Textmenü eingeschränkt, mit Hilfe von
Cascading Stylesheets (CSS) kann man jedoch trotzdem ausreichende Ergebnisse erzielen.
Eine reine Textnavigation ist im Prinzip nichts anderes als die Aneinanderreihung von Hyperlinks, wie man sie auch in normalen Contents verwendet. Eingebunden in eine unsortierte Liste

…

werden die Links entsprechend positioniert. Genauso wie beim herkömmlichen Hyperlink stehen hier verschiedene HTML/CSS-Codierungen zur Verfügung.
Beispielsweise kann man mit dem Befehl “a.hover” die Erscheinung des Textes beim Überfahren mit dem Mauszeiger verändern (Textfarbe, Hintergrund usw.). Weitere wichtige CSS-Befehle sind : “a.selected”. Hiermit kann die aktuell geöffnete Seite gekennzeichnet werden, oder “a.visited”. Diese zeigt anhand der besonderen Linkmarkierung, auf welcher Seite man schon gewesen ist. Der große Vorteil von Textmenüleisten besteht darin, dass sie gegenüber Grafikmenüs eine schnellere Ladezeit haben. Hinzu kommt noch, dass sich Textnavigationsleisten leicht verändern und aktualisieren lassen.

Grafiknavigationsleiste
Obwohl man inzwischen viele Effekte mit CSS erzeugen kann, erfreuen sich verlinkte Grafiken noch großer Beliebtheit. Hierbei ist das Prinzip genau das selbe, wie bei einer Textmenüleiste. Allerdings wird jetzt der Text durch verlinkte, entsprechend beschriftete Grafiken (Buttons) ersetzt. Die Erstellung ist dementsprechend aufwendiger. Man hat aber den Vorteil, dass man die Menüleiste mit Grafiken individueller, z.B. durch Anpassung an ein vorhandenes Corporate Design, gestalten kann.

Keine Beiträge gefunden.