Clevere CSS Navigationen

Einer der wichtigsten Teile einer Website ist sicherlich die Navigation und diese ist meistens auch am aufwendigsten zu erstellen. Deshalb ist es besonders wichtig ein übersichtliches und semantisch sauber programmiertes Menü zu erstellen, welches die eine einfache Navigation ermöglicht und den Besucher schnell zu dem gewünschten Ziel führt. Eine Möglichkeit, die Stylesheets bieten sind Listen (UL / LI) um solche Menüs zu erstellen. Hier sind ein paar Beispiele:

Magix: CSS Dropdown Menü

Magix Navi
Magix verfügt über eine große Anzahl von Links und verpackt diese in einer optisch sehr ansprechenden und logisch aufgebauten Drop-Down-Navigation. Die fünf Oberkategorien zeigen jeweils verschiedene Unterkategorien, welche alle mit einem Hover-Effekt versehen sind. Dieser Effekt zeigt eindeutig wo man sich befindet und erleichtert so die Navigation.

Technisch ist diese Navigation durch drei verschachtelte UL-Listen gelöst. Die Navigationselemente der Oberkategorie (z.B. Produkte, Free Download,…) sind in der obersten Liste eingebunden und die jeweilige Unterkategorien (z.B. Foto, Grafik & Web,Video,…) sind wieder eigene Listen, welche durch ein float: left nebeneinander angeordnet werden. Letztendlich sind die eigentlichen Links je Unterkategorie (z.B. Retten Sie Ihre Videokassette, Video deluxe,…) in die untersten Listen eingeordnet.

Die Oberkategorie wird immer angezeigt und führt auf die im Stylesheet durch ein visibility: hidden standardmäßig ausgeblendeten Unterpunkte der Navigation. Diese werden mit der Pseudo-Klasse :hover angesprochen und kommen mit einem visibility: visible zum Vorschein.

Eine gute Vorlage für die eigene Nutzung eines solchen Dropdown-Menüs bieten Patrick Griffiths and Dan Webb mit ihren Son of Suckerfish Dropdowns. Hier wird übersichtlich und leicht verständlich Schritt für Schritt erklärt wie man eine solche Navigation selbst erstellt und aufgeteilt nach HTML und CSS in die eigene Website einbindet.

Ein kleiner Unterschied zur Navigation von Magix besteht allerdings, da hier nicht mit visibility: hidden sondern mit absoluter Positionierung gearbeitet wird. Der Inhalt wird nicht unsichtbar gemacht, sondern mit left: -999em aus dem sichtbaren Bereich nach Links verschoben und bei Bedarf mit left: auto wieder am richtigen Platz angezeigt. Dies sind jedoch zwei gleichwertige Möglichkeiten Teile der Navigation so lange “zu verstecken”, bis sie gebraucht werden.

Storopack Deutschland: CSS Dropdown Menü

Storopack Navi
Storopack ist ein weiteres Beispiel für die Nutzung der absoluten Positionierung. Hier wird sinngemäß auch das “Son of Suckerfish Dropdown” genutzt und die Unternavigation wird mit left: -999em aus- und mit left: auto wieder eingeblendet.

Auch hier wird der Hover-Effekt eingesetzt um die Navigation zu erleichtern. Einmal in Form eines Pfeils als Hintergrundgrafik und weiter durch die Eigenschaft text-decoration: underline, um die aktiven Links hervorzuheben.

Telekom Training: CSS Drop-Down/Right Menü

Telekom Navi
Telekom Training hingegen hat eine andere Möglichkeit gefunden, das Menü erst auf Wunsch auszuklappen. Sie benutzen die Eigenschaft display mit dem Wert display: none um das Menü zu verstecken, und display: block um es wieder anzuzeigen.

Der Grundgedanke dieser Navigation ist der gleiche wie bei den oberen Beispielen, obwohl sich dieses Menü nach rechts und nicht nach unten öffnet. Das Untermenü wird immer rechts von dem aktivierten Link angezeigt. Diese Möglichkeit das jeweilige Untermenü immer an der passenden Stelle nach rechts aufklappen zu lassen wird hier mit position: absolute und in diesem Zusammenhang mit top: 0px und left: 156px erreicht, wobei der zweite Wert genau die Breite des jeweiligen Obermenüs darstellt.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • LinkArena
  • MisterWong.DE
  • NewsVine
  • SphereIt
  • Yigg

1 Kommentar zu „Clevere CSS Navigationen“

  1. Meissen sagt:

    Sehr schöne Zusammenfassung der Möglichkeiten von CSS Menüs. Für das nächste Design bin ich auch noch auf der Suche wie ich eine größtmögliche Usability erreichen kann. Danke für die Tipps.
    Grüße

Kommentieren