Ich habe mir schon lange vorgenommen mal ein Tutorial für ein horizontales Dropdown-Menü zu erstellen. Und da ich gerade mal wieder ein wenig Zeit und Lust hatte, habe ich mal hingesetzt und ein wenig ausprobiert.

Das ist dabei rausgekommen:

Wenn ihr ebenfalls etwas Zeit und Lust mitbringt, zeige ich in diesem Tutorial, wie ihr ein schickes horizontales Dropdown-Menü erstellt. Das Menü wird, mit Ausnahme der Hauptmenü-Icons, CSS-only, wir verwenden also keine Bilddateien.

Ich habe vor kurzem in diesem Artikel einige Pseudo-Elemente vorgestellt und auch Beispiele für den praktischen Einsatz aufgezeigt. Ein Element habe ich dabei bewusst ausgelassen, da es sich definitiv lohnt, es genauer vorzustellen: die Pseudo-Klasse :target.

Wie der Name schon verrät (target (englisch) = Ziel), wird die Klasse aktiv, wenn das dazugehörige Element aufgerufen oder Ziel einer Aktion ist. Mittels :target können bestimmte Elemente oder Bereiche auf der Webseite angesprochen und formatiert werden.

So lässt sich beispielsweise die Schriftfarbe ändern, wenn das entsprechende Element aufgerufen wird. Die simple Style-Deklaration dafür wäre wie folgt:

[css]#absatz {
color: #fff;
}

#absatz:target {
color: #000;
}[/css]

Stellt sich nur die Frage, wie die ID absatz als Ziel aufgerufen werden kann. Vielleicht ist bekannt, dass IDs als Ankerpunkt genutzt werden können. Beispielsweise kann ich mit dem Link

http://www.olivergast.de/gb/#comments

direkt zum Kommentarformular des Gästebuchs springen, ohne das Gästebuch aufrufen und zum Kommentarformular scrollen zu müssen.

Und so können wir im obigen Beispiel durch einen direkten Link auf das Element dessen Schriftfarbe ändern:

[html]<a class="button" href="http://www.einbeispiel.de/seite/#absatz">Schriftfarbe ändern</a>[/html]

Klar soweit?