Pflegeleichte Textmenüs

Teil 2: Pflegeleichte Textmenüs

27.8.2007 von Redaktion pcmagazin und Volker Hinzen

ca. 1:35 Min
Ratgeber
  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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.