Beispiele für Navigations-Menüs
Einige Beispiele, wie man Menüs erzeugen kann. Die Farben sind im Zusammenhang egal, die Grafiken handgemalt, aber ich will ja auch nur zeigen, wie es geht. Zuerst die senkrechten Menüs. Halt auch mal die Maus auf Menüpunkten gedrückt ...
Einfachstes Menu mit den
Normal-Farben und unterstrichen,
so, wie es von Haus aus ist
Einfachstes Menu mit den Normal-Farben ohne Unterstreichung
Einfaches Menü, das schon
durch die Hintergrundfarbe eine Art
Navigations-Block darstellt. Die
einzelnen Menüzeilen sind durch
einen einfachen Rand etwas
voneinander und vom Seitenrand
entfernt.
Das gleiche Beispiel, ergänzt
durch "hover"- und "active"-Farben.
"hover" ist eine Auszeichnung,
die nur wirksam ist, wenn der
Mauszeiger darüber schwebt,
"active" wirkt nur, wenn die linke
Maustaste gedrückt ist.
Schrift nach rechts gezogen
durch "padding-left". "line-height"
erzeugt größere Menüzeilen.
Sieht besser aus.
Neue Klasse "aktiv" (nicht
verwechseln mit "active") zeigt,
welcher Menüpunkt aktiv ist.
Hier wird zusätzlich ein Bild
eingefügt. Das Bild ist in der
CSS-Datei als Hintergrundbild
bestimmt, das nicht wiederholt
wird und an der Position x=2 und
y=7 steht.
Und damit es nicht so langweilig
wirkt, habe ich den Menüeinträgen
noch ein Rand verpasst.
Der Trick ist folgender: die Dicke des Rahmens beträgt jetzt 3 Pixel, die Farbe ist zwar grundsätzlich schwarz, sie wird aber für oben und links sofort auf weiß gesetzt.
Wenn ich jetzt im "hover"-Effekt diese Festsetzung genau umdrehe, also oben und links schwarz und unten und rechts weiß, dann entsteht im Zusammenspiel der 3D-Effekt.
Zusätzlich ändert sich die Schriftdicke auf "fett"und die Pfeil-Farbe auf rot. Diese letzten Zeilen habe ich zusätzlich in den Eintrag "a:aktiv" geschrieben, damit die (jetzt zweite) aktuelle Seite einen "gedrückte Taste"-Eindruck erweckt.
Der "hover"-Zustand führt den Pfeil aber noch und rückt die Schrift wieder nach rechts.
Im eigentlichen Menü ist jetzt keine Seite aktiv, damit man den Effekt besser sieht.
Jetzt einige Beispiele für waagerechte Navigation:
Beispiel 1
Das allereinfachste, sieht überhaupt nicht aus!
Beispiel 2
Mit 5 Pixel "padding" etwas besser, die Farbe "schwarz" ist die des Links und klebt zu eng an den Buchstaben.
Beispiel 3
Jetzt ist das Menü zentriert: die Menüpunkte bekommen eine Abstand von links, der Wert richtet sich nach der Länge der Menüzeile und der Anzahl an Links. Hier haben die einzelnen Links noch ein "padding" von 20px nach links und rechts bekommen, das sieht so schon besser aus. Eine fette Schrift macht sich im Menü ganz gut, oder?
Beispiel 4
Hier haben die Menüpunkte ein "padding" in jede Richtung erhalten, die Schrift ist größer und dass es Links sind, sieht man erst, wenn man mit der Maus darüber fährt.
Ich habe Dir hier einige Beispiele für Navigationsmenüs gezeigt. Die Einzelteile sind zum großen Teil kombinierbar und daraus ergibt sich eine riesige Anzahl von möglichen Navigationsmenüs. Du hast die Qual der Wahl ...
Die Anzahl steigt nochmal durch den Einsatz von Grafiken, die man genauso gut wie Texte als Links benutzen kann. Aber: beschriftete Grafiken sind nicht "barrierefrei". Menschen mit Sehbehinderungen können normalerweise ziemlich gut im Internet surfen, solange Texte zur Verfügung stehen. Grafiken mit enthaltenem Text kann kein Blinder "lesen". Deshalb gilt: Grafiken gern, aber es sollten immer "Background"-Bilder sein, die mit dem eigentlichen Text-Link beschriftet werden. Oder Du benutzt die Auszeichnung "title" zur Beschreibung wie im letzten Beispiel.
Das Menü auf dieser Seite besteht natürlich aus Hintergrundgrafik mit Textlinks.