Wie so oft gibt es viele Wege, die nach Rom führen. Der eine ist gepflastert, der andere schlammig. Einer ist besser, der andere schlechter. Ich wage zu behaupten, dass der nachfolgende relativ gut ist. Lange Rede - kurzer Sinn, fangen wir an!

Es sollte eigentlich mittlerweile klar sein, dass eine Navigation nichts anderes ist als eine Liste. Daher sollte es ebenfalls naheliegen, entsprechende HTML-Element zu nutzen. Wir haben einige Möglichkeiten eine Liste auszuzeichnen: die ungeordnete (ul), die geordnete (ol) und die Definitionsliste (dl). In diesem Tutorial möchte ich gerne eine Navigation nutzen, die gleichzeitig eine kurze Beschreibung des zu erwartenden Inhalts anbietet. Und bevor wir jetzt eine ungeordnete Liste zweckentfremden, nutzen wir lieber das richtige HTML-Element: eine Definitionsliste.



Code:


<dl> => Die Definitionsliste.
<dt> => Der zu definierende Begriff.
<dd> => Die dazugehörige Definition.

Auf's nötigste reduziert. Dürfte eigentlich alles selbsterklärend sein. Jeder Menüpunkt hat von mir eine individuelle Klasse bekommen, so können wir später mittels CSS jeden Punkt einzeln formatieren.

Gesagt getan, fangen wir an, das ganze mittels CSS "schick" zu machen.

Code:

Zuerst setzen wir alle Abstände des Listenelements und der Einträge (dt und dd) auf 0. Dabei nutze ich die Möglichkeit der mehrstufigen Selektoren (z.B.: #navigation dt), um nur unsere Navigationsliste zu formatieren. Wir wollen ja nicht, dass Inhaltselemente der Webseite hinterher auch aussehen wie unsere Navigaion. ;)

Code:

Die Navigation soll später 200 Pixel breit sein, und einen Innenabstand von 10 Pixeln haben. Also geben wir ihr eine Breite von 180px und einen Innenabstand von 10 Pixeln. (Dieser wird von den Browsern auf die Breite angerechnet, so erhalten wir einen rechnerischen Wert von 200 (180 + 10[links] + 10[rechts]) Pixeln.

Code:

Ich mag das Standardblau der Links gerne, also werden unsere Navigationspunkte ebenfalls blau. Wir geben dem Link-Element (<a>) ein display: block; mit auf den Weg, so ist die gesamte Fläche des <dt> für den Surfer klickbar.

Die Abstände sollten klar sein. Der Text wird allerdings 25px nach rechts gerückt, damit wir links daneben noch Platz für ein Icon haben.

Code:

Der erste Block zeigt die Seite an, die der Benutzer "aktuell" offen hat. Die ID #aktuell wird dem betreffenden Link z.B. per PHP mitgegeben (nötigenfalls auch von Hand ins Dokument geschrieben).

CSS bietet uns die Möglichkeiten, die verschiedenen Status des Links für den Benutzer zu kenzeichnen. Also sollten wir das  auch nutzen:
Der zweite Block nutzt die Pseudoklassen :active und :focus. Diese Links sollen in unserem Fall rot erscheinen. :acive zeigt dem Benutzer, dass er dort grade draufgeklickt hat, was z.B. bei längeren Wartezeiten interessant ist. :focus hingegen zeigt dem Besucher, dass dieser Link gerade fokussiert ist, er ihn also mit einem Druck auf "Enter" anklicken kann, interessant für mauslose Computer.

Code:

Hier haben wir nun unsere individuellen Links zur Startseite, Über mich, Portfolio, Kontakt und Impressum. Ich habe jeweils ein Icon aus dem grandiosen Famfamfam.com Silk Icons-Package genommen. Diese sind kostenlos verfügbar. Am besten einmal ansehen! Jedes Icon wird in den Hintergrund des <a>-Elements gesetzt; dabei soll es nicht wiederholt, vertikal zentriert und linksbündig ausgerichet werden.

Code:

Fasst geschafft. Nur noch die Beschreibung der Links formatieren und fertig sind wir. Die Beschreibung soll also kursiv, einen Grad kleiner (13px), in Dunkelgrau (#555) und mit einem Abstand links dargestellt werden. Unter jedem Element soll ein Abstand (15px) zum nächsten Link erscheinen.

Damit wären wir durch. Das Ganze kann man sich hier in Aktion ansehen. Ein statischer Vorgeschmack:



Ich hoffe, das Tutorial dient dem einen oder anderen als Inspiration und propagiert ein wenig die Verwendung der passenden HTML-Elemente.


>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!