Den Code der Navigation können Sie sich im Quelltext ansehen. Im Hintergrund der Navigationselemente wird über CSS ein einziges Bild hin- und hergeschoben, wenn man mit der Maus über das Menü fährt. Und so sieht das ganze Bild aus, von welchem in der Navigation immer nur entweder die linke oder die rechte Hälfte zu sehen ist:
Das Bild sollte etwas höher sein, es ist aber nicht so wichtig, ob es nun doppelt oder dreimal so hoch ist, als es für die Höhe der Navigationselemente bei mittlerer Schriftgröße notwendig ist. Mit etwas Reserve bei der Bildhöhe geht man Problemen aus dem Weg, die es sonst geben könnte, wenn ein Surfer im Internet Explorer die Schrift größer einstellt.
Die Breite des Bildes ist hingegen ganz genau vorgegeben. Es muss auf den Pixel genau doppelt so breit sein wie die Navigation; zudem muss die Grenze der linken und der rechten Bildhälfte haarscharf in der Bildmitte sein. Was passiert, wenn das Bild nicht breit genug ist, zeigt das folgende Beispiel, in welchem das Menü breiter gemacht wurde. Außerdem wurde die Höhe der Listenpositionen von 170px auf 50 px reduziert und alle <br> wurden aus der Liste entfernt. Das Bild im Hintergrund der Navigation ist das selbe wie im obigen Beispiel.
Der Witz der ganzen Geschichte besteht also darin, dass immer nur ein Teil des Bildes sichtbar ist.
Mein Dank gilt Bubák, Jak psát web, DJPW und wellstyled.com.
Zur Startseite: www.zabra.at