barrierefreies Webdesign Ingo Turski

zum Inhalt

Ingo

Tips und Tricks:Grafische Menüs - mit nur einem einzigen Button

Anstelle von einfachen Text-Links werden gern Grafiken verwendet. Meist wird dabei für jeden Menüpunkt eine eigene Grafik erstellt. Der Nachteil für den Besucher dabei ist, daß er auf den Aufbau des Menüs warten muß. Zumindest dann, wenn sich diese Buttons nur durch die Beschriftung unterscheiden, bedeutet dies aber auch für den WebDesigner die überflüssige Arbeit, auf den 'leeren' Ausgangsbutton mit einem Grafikprogramm Beschriftungen zu setzen. Dies geht auch einfacher und eleganter.

Wir brauchen hierfür zunächst einen unbeschrifteten Button, z.B. diesen:

Button

<img src="but-blau4.gif" width="110" height="21" alt="Button" />

Dann müssen wir entscheiden, wie wir die Menüpunkte voneinander trennen. Da grafische Buttons am häufigsten in Tabellen eingebettet werden, verwende ich hier zur Demonstration zunächst eine einfache Tabelle:


<table cellpadding="0" cellspacing="4" width="114" border="1">
<tr><td>Menü 1</td></tr>   <tr><td>Menü 2</td></tr>   </table>

Nun kommt der eigentliche Trick. In den Tabellenzellen wird die Button-Grafik als Hintergrundbild gelegt und der Text passend eingerückt:


<table cellpadding="0" cellspacing="4" width="114">
<tr><td style="background: url(but-blau4.gif) no-repeat;
        height:21px; padding-left:20px;">Menü 1</td></tr>
<tr><td style="background: url(but-blau4.gif) no-repeat;
        height:21px; padding-left:20px;">Menü 1</td></tr>
</table>

Jetzt fehlt meist noch ein 'Hover'-Effekt. Dieser wird normalerweise realisiert, indem man einen weiteren Satz von (meist nur in der Beschriftung geänderten) Buttons erstellt und diese per JavaScript mit 'onmouseover' anzeigen läßt. Wieder unnötige Arbeit für den WebDesigner und Wartezeit für den Besucher. Hier geht das einfacher mit CSS, wobei wir jetzt auch die bisherigen Style-Angaben zentral als 'Klasse' im head-Element definieren:


<head>
  <title>Grafische Menüs - mit nur einem einzigen Button</title>
  <style type="text/css">
    div.menue { background: url(but-blau4.gif) no-repeat;
                width:110px; height:21px; margin:4px; }
    div.menue a { padding-left:20px; display:block; text-decoration:none; }
    div.menue a:link, div.menue a:visited { color:#fc0; }
    div.menue a:hover { color:white; }
    div.menue a:active { color:black; }
    * html div.menue a { width:100%; }
  </style>
</head>
<body>
  <div class="menue"><a href="#Beispiel">Menü 1</a></div>
  <div class="menue"><a href="#Beispiel">Menü 2</a></div>
</body>

Die umständliche Tabellenkonstruktion ist in diesem Beispiel durch '<div>' ersetzt worden (noch sinnvoller wäre die Auszeichnung als Liste, wie z.B. bei meinem iMenu).
Über den Style 'display:block;' werden die Links auf den gesamten Button erweitert.
Für den Internet Explorer, der dies nicht korrekt umsetzt, ist zusätzlich 'width:100%;' notiert. Dies führt jedoch bei standardkonformen Browsern dazu, daß der Linkbereich über den normal sichtbaren Button um die 20px Padding nach rechts erweitert wird. Bei einer Abstandsdefinition über Padding (anstatt z.B. Leerzeichen) wird die Weitenangabe daher vor ihnen verborgen - hier über den sog. Star-HTML-Hack.

Achtung: Der Internet Explorer 6 interpretiert diese Seite im sog. Quirks-Modus. Wird er über eine entsprechene Doctype-Deklaration in den standardkonformen Modus versetzt, so ist die tatsächliche Weite des DIVs abzgl. des Paddings für ihn anzugeben (hier width:90px;)!
Dies können Sie im Quelltext der Button-Demo sehen, die auch einige ausgesuchte Möglichkeiten der Gestaltung von Pseudo-Buttons ohne Grafiken über CSS aufzeigt.

Wem der Hover-Effekt nicht ausreicht, der braucht lediglich einen weiteren Grafik-Button:

Hover-Button

An dem vorigen Beispiel muß nun nur noch in der Definition für a:hover diese alternative Hintergrundgrafik definiert werden:


...
   div.menue a:hover { background: url(but-blau4rot.gif) no-repeat; }
...

Fazit: Der Quellcode ist wesentlich 'aufgeräumter' und bei z.B. nur 6 Menüpunkten hat man sich die Erstellung (und Online-Stellung) von 6 (normal) + 6 (hover) + 6 (active) = 18 Grafiken erspart und dem Benutzer die Ladezeiten von 17 bzw. 16 eigentlich unnötigen Buttons.