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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…