Logo

Eigene Homepage

Beispiele für Navigations-Menüs

Halt auch mal die Maus auf Menüpunkten gedrückt ...


#beispiel1 a { display: block; }

Einfachstes Menu mit den Normal-Farben und unterstrichen,so, wie es von Haus aus ist


display: block; text-decoration:none;

Einfachstes Menu mit den Normal-Farben ohne Unterstreichung


display: block; text-decoration:none; width:100px; line-height:20px; background-color:#silver; margin:5px;

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.


#beispiel4 a:hover { background-color:lime; color:red; } #beispiel4 a:active { background-color:white; color:red; }

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.



#beispiel5 a { ... padding-left:20px; line-height:30px; } #beispiel5 a.aktiv { background-color:white; color:red; }

In diesem Beispiel habe ich die Schrift durch ein "padding-left" nach rechts gezogen, denn es ist schöner, wenn nicht alles am äußersten Rand steht.

Zusätzlich gibt es jetzt eine neue Klasse "aktiv" (nicht verwechseln mit "active"), deren Auszeichnung nur für die gerade aktuelle Seite gilt. Dazu muss ich den Link in der Seite mit "<a class="aktiv" href="...." ergänzen.

Und eine breitere Zeile macht sich doch auch gut ...

#beispiel6 a { .... background-image: url(Pfeil-schwarz.png); background-repeat: no-repeat; background-position: 2px 7px; border: 1px solid black; }

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.

#beispiel7 a { .... border:3px solid black; border-top-color:white; border-left-color:white; } #beispiel7 a:hover { .... border-top-color:black; border-left-color:black; border-bottom-color:white; border-right-color:white; font-weight:bold; }
Das hier sieht doch richtig schön professionell aus! Gut, über die Farben sollten wir noch reden, aber ich habe sie hier nur zu Demozwecken krass gewählt.

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.

#beispiel8 a { ... }
Kleine Spielerei mit dem Beispiel: ich habe den Pfeil im Grundzustand weggelassen und die Schrift wieder nach links gerückt.

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.

title="Hier wird der ... title="Dieser Artikel .. title="Alles, was ich ..
Dieses Menü ist wieder das Beispiel 6, allerdings ohne aktive Seite. Wenn Du den Mauszeiger über einem Link verweilen lässt, erscheint eine erklärende Schrift. Dazu musste ich das Menü selbst um "title"-Einträge ergänzen.

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 aus Hintergrundgrafik mit Textlinks.


Zurück zur automatischenDiashow

Feedback Mein Gästebuch nach oben