Pflegeleichte Textmenüs

Pflegeleichte Textmenüs

Grafiken und Java-Applets sind out. Setzen Sie bei der Navigation Ihrer Website auf ein reines Textmenü. Mit einer HTML-Liste und etwas CSS erstellen Sie eine ansprechende und flexible Navigationsleiste.

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

© Archiv

Pflegeleichte Textmenüs

Beim Styling von Navigationsleisten greifen viele Webmaster immer noch lieber auf Grafiken zurück. Sie beschriften die Schaltflächen mit dem Grafikprogramm und binden sie mit dem <img>-Tag auf ihren Seiten ein. Auf diese Weise haben sie die Gestaltung der Buttons zwar gut im Griff, jedoch sind solche Menüs nicht besonders flexibel. Reine Textmenüs lassen sich einfacher ändern und erweitern. Sie sind schneller geladen und haben in punkto Zugänglichkeit die Nase vorne. In diesem Workshop zeigen wir Ihnen, wie Sie aus einer einfachen Textliste ansprechend gestaltete Navigationsmenüs mit Mouseover-Effekt zaubern. Alle Beispiele finden Sie auf der Heft-CD.

Liste als Grundlage

Bei einem reinen Textmenü könnten Sie die Einträge einfach mit Zeilenumbrüchen getrennt untereinander schreiben. Da es sich bei einem Menü jedoch um eine Liste mit Links handelt, sollten Sie das dafür vorgesehene HTML-Strukturelement verwenden. Legen Sie die Navigation nach dem folgenden Muster als Aufzählungsliste an:

Pflegeleichte Textmenüs

© Archiv

<ul id="hauptnavi"><li><a href="#">Home</a></li><li><a href="#">Produkte</a></li><li><a href="#">Service</a></li><li><a href="#">Kontakt</a></li></ul>

Beim Menü stören jedoch die markanten Aufzählungspunkte vor den Einträgen. Mit der folgenden CSS-Angabe blenden Sie die Bullet-Symbole aus. Die gesamte Liste bleibt ohne die Aufzählungszeichen weiterhin eingerückt. Ziehen Sie sie daher mit einer zusätzlichen CSS-Angabe bündig an den linken Rand.

#hauptnavi {list-style-type: none;} 
margin:0.5em; padding-left:0.5em;

Als Button gestalten

Um die Links als Schaltflächen zu gestalten, färben Sie den Hintergrund jedes Textes mit einem CSS-Format ein. Im ersten Beispiel endet die Füllung kurz hinter dem letzten Buchstaben, damit sind die Schaltflächen unterschiedlich lang. Möchten Sie einen einheitlich langen Balken, dann ergänzen Sie das Format für die Links um eine weitere Angabe.

Pflegeleichte Textmenüs

© Archiv

#hauptnavi a {background-color: #CCC;} 
#hauptnavi a {background-color: #CCC; 
.display: block;}

Der Abstand zwischen den Texten und dem Rand ist immer noch zu gering. Außerdem bilden die Balken bei der Anzeige mit Firefox eine zusammenhängende graue Fläche. Fügen Sie daher die beiden folgenden Attribute hinzu:

padding: 3px 10px; margin-bottom: 5px;

Das Menü sieht im Browser schon anständig aus. Einen Fehler gibt es jedoch noch, wenn Sie die Seite mit dem Internet Explorer im so genannten Quirksmodus betrachten. In diesem Modus befindet sich eine Seite, wenn sie beispielsweise keine Doctype-Angabe enthält. Das Problem: Der Abstand zwischen den Einträgen ist beim Internet Explorer deutlich größer als bei den anderen Browsern. Legen Sie die Breite der Linkbereiche daher mit "width: 99%" fest. Der Internet Explorer zeigt das Menü damit zwar korrekt an, jedoch würde diese Angabe auch von der Konkurrenz interpretiert werden. Mit dem folgenden Trick setzen Sie das Format für die anderen Browser wieder auf den Ausgangswert zurück:

html>body #hauptnavi a {width: auto; }

Der Internet Explorer versteht diese formal korrekte Syntax nicht und ignoriert die Maßangabe. Bei den meisten anderen Browsern wird der Wert 99% jedoch durch den Wert "auto" überschrieben. Die Schaltflächen dehnen sich nun über das komplette Browserfenster aus. Begrenzen Sie den Bereich für das Menü, indem Sie die Navigationsleiste entweder in eine Tabellenzelle oder in einen Abschnitt mit fester Breite packen. Fügen Sie die Liste beispielsweise zwischen "<div id="navicontainer">" und "</div>" ein und legen Sie die Ausdehnung dieses Abschnittes mit einem weiteren CSS-Format fest. Mit der relativen Maßeinheit em sorgen Sie dafür, dass sich die Breite des Menüs stets an die im Browser eingestellte Schriftgröße anpasst:

#navicontainer {width:8em;}

Horizontales Menü

Da Listen standardmäßig vertikal angezeigt werden, sind die Menüeinträge zuerst einmal untereinander angeordnet. Mit der gleichen Linkliste lässt sich aber auch problemlos ein horizontales Menü einrichten. Verwenden Sie dazu an Stelle der bisherigen CSS-Angaben das folgende Format:

Pflegeleichte Textmenüs

© Archiv

Eine HTML-Liste bildet die Grundlage für alle Menü-Lösungen. Am Ende steht ein trendiges Tab-Menü.
#hauptnavi li {display: inline; 
.padding: 5px 15px;}

Durch das Attribut display:inline verlieren die Listenpunkte ihre Blockeigenschaft. Sie werden nebeneinander angeordnet. Die Aufzählungszeichen fallen bei dieser Darstellung automatisch weg. Die Breite der Menüeinträge hängt von der jeweiligen Textmenge ab. Mit dem Parameter "width" lässt sich dies nur für den Internet Explorer, aber nicht für Firefox und Opera ändern. So gestalten Sie die Menütexte als gleich breite Schaltflächen:

#hauptnavi li { 
float:left; 
margin: 0px 5px; 
background-color:#CCC; 
width: 90px; 
list-style-type: none;}

Mit dem Attribut "float.left" sorgen Sie dafür, dass die Listenpunkte nebeneinander stehen. Eine einheitliche Breite der Menüeinträge stellen Sie mit "width:90px" sicher. Mit "list-style- type:none" entfernen Sie schließlich noch die Bullet-Symbole. Bisher ist jedoch lediglich der Text des Menüeintrags anklickbar. Möchten Sie den gesamten Button inkl. Hintergrund als Link ausbauen, dann ergänzen Sie:

#hauptnavi a {display:block; width: 
.99%; padding: 3px 10px;} 
html>body #hauptnavi a {width: auto; }

Betrachten Sie das Ergebnis mit den gängigen Browsern, fällt auf, dass der Internet Explorer die Schaltflächen deutlich schmaler anzeigt als z. B. Firefox. Grund: Ein Box-Modell-Fehler im Quirksmodus. Sobald Sie der Seite folgende Dokumenttyp-Definition für den Strict- Modus voranstellen, ist das Problem gelöst:

<!DOCTYPE HTML PUBLIC "-//W3C// 
.DTD HTML 4.01//EN" "http://www.w3. 
.org/TR/html4/strict.dtd">

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​".