Pflegeleichte Textmenüs

Teil 2: Pflegeleichte Textmenüs

  1. Pflegeleichte Textmenüs
  2. Teil 2: Pflegeleichte Textmenüs

Die Links des Menüs erscheinen bisher noch unterstrichen und in der typischen blauen Standardfarbe. Peppen Sie sie mit CSS-Befehlen auf. Geben Sie für die unterschiedlichen Linkzustände beispielsweise die folgenden Stile ein:

Pflegeleichte Textmenüs

© Archiv

#hauptnavi a:link, #hauptnavi a: 
.visited {color: #000; background- 
.color: #CCC;} 
#hauptnavi a:hover {color: #FFF; 
.background-color: #999;} 
#hauptnavi a:active {color: #000; 
.background-color: #CCC;}

Es kommt dabei auf die Reihenfolge der Befehle im Quelltext an. Ersetzen Sie Farbwerte durch beliebige eigene Codes. Im Beispiel ändern die Schaltflächen ihre Farben lediglich beim Mausüberfahren. Mit dem folgenden Format entfernen Sie die Unterstreichung für alle vier Zustände gemeinsam.

#hauptnavi a {text-decoration:none;}

Auch einfache zweidimensionale Buttons lassen sich in beeindruckende 3D-Schaltflächen verwandeln. Ein Beispiel dazu finden Sie auf der Heft-CD: horizontales_menue_mousever_ 2.html

Menü in Registeroptik

Sehr beliebt sind derzeit Navigationsleisten in Form eines horizontalen Registers. Ein solches Tab-Menü lässt sich mit der HTML-Liste und entsprechenden CSS-Befehlen anlegen. Heben Sie dabei den aktuell ausgewählten Eintrag im Menü optisch hervor. Weisen Sie dazu beispielsweise dem ersten Menüpunkt nach dem folgenden Muster einen Namen zu:

Pflegeleichte Textmenüs

© Archiv

<li><a href="#" id="aktuell">Home</a>
.</li>

Formatieren Sie danach die gesamte Liste mit der folgenden CSS-Angabe:

#hauptnavi 
{ 
font: bold 10px Verdana, sans-serif; 
margin-left: 0px; 
padding: 3px 0px; 
border-bottom: 1px solid #999; 
}

Mit "border-bottom" ziehen Sie über die gesamte Breite einen dünnen Strich unterhalb des Registers. Die Einträge ordnen Sie mit dem Befehl

#hauptnavi li {margin: 0; display: 
.inline; list-style: none;}

nebeneinander an. Jeder Menüpunkt stellt einen Reiter in der Tab-Leiste dar. Formatieren Sie die Einträge mit:

#hauptnavi a 
{ 
text-decoration: none; 
background: #DDD; 
padding: 3px 10px; 
margin-left: 5px; 
border: 1px solid #999; 
border-bottom: none; 
}

Mit der Eigenschaft "border" ziehen Sie eine Linie um den gesamten Link herum und mit "border-bottom:none" löschen Sie diese direkt wieder an der Unterkante. Formatieren Sie die Menütexte und fügen Sie einen Hover-Effekt mit den folgenden Formaten hinzu:

#hauptnavi a:link, #hauptnavi a: 
.visited { color: #333; } 
#hauptnavi a:hover {color: #000; 
.background-color: #999; border- 
.color: #000;}

Ergänzen Sie schließlich noch das Format für den aktuell ausgewählten Registereintrag - fertig ist die ansprechende Registerleiste:

#hauptnavi a#aktuell {border-bottom: 
.1px solid white; background-color: 
.#FFF;}

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".