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:

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.

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.

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:

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:

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:

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:

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:

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:

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: