Verweise

Navigationsmenü mit Schaltflächen als HTML-Liste

Wer den Anspruch hat Inhalt und Aussehen einer Webseite voneinander zu trennen (was viele Vorteile hat), steht oft vor dem Problem der sinnvollen Umsetzung eines Navigationsmenüs. Da es sich hierbei um eine Auflistung von Verweisen handelt, empfiehlt sich eine Auszeichnung als HTML-Liste. Nachfolgend wird eine Möglichkeit aufgezeigt, eine solche Liste mit CSS zu Schaltflächen umzuformatieren.

Lösungsvorschlag

Eine Umsetzung eines solchen Navigationsmenüs könnte so aussehen:

Hier liegt folgende Liste im HTML-Quelltext vor:

<ul>
   <li><a href="…">Altavista</a></li>
   <li><a href="…">Google</a></li>
   <li><a href="…">Yahoo</a></li>
</ul>

Die Breite des Navigationsmenüs wird im CSS-Quelltext auf 150 Pixel gesetzt, Innenabstände entfernt und das Menü mittig ausgerichtet:

   ul
   {
      width:150px;
      padding:0;
      margin:0 auto;
   }

Den Listenpunkten wird der Listenstil abgewöhnt, Innenabstände entfernt, ein Pixel Abstand um die Listenpunkte gesetzt (hierdurch erhöht sich die Gesamtbreite um zwei Pixel!) und der Inhalt mittig ausgerichtet:

   li
   {
      list-style:none;
      padding:0;
      margin:1px;
      text-align:center;
   }

Um die Verweise als Schaltflächen erscheinen zu lassen, erhalten sie eine Breite und werden als Blockelement formatiert. Innenabstände werden entfernt, ein 1-Pixel-Rahmen um die Verweise gesetzt (hierdurch erhöht sich die Gesamtbreite um zwei Pixel!), die Hintergrund- und Schriftfarbe werden gesetzt. Die Unterstreichung von Verweisen wird unterdrückt:

   a
   {
      width:150px;
      display:block;
      padding:0;
      border:1px solid #7f7f7f;
      background-color:#ffffff;
      color:#000000;
      text-decoration:none;
   }

Eine Farbveränderung beim Durchqueren der Schaltfläche mit dem Mauszeiger wird ermöglicht:

   a:hover
   {
      background-color:#000000;
      color:#ffffff;
   }

Denkbar sind zusätzliche Listenpunkte, die keine Verweise enthalten, sondern der Strukturierung verschiedener zusammenhängender Verweise dienen. Diese ließen sich beispielsweise mit dem <em>-Element auszeichnen, wobei dies ähnlich wie das <a>-Element mit CSS formatiert wird, aber beispielsweise in Breite oder Farbe abweicht (ähnlich ist es übrigens bei abbiseite.de umgesetzt).

Leider berechnet der Internet Explorer die Breite der Schaltfläche anders, wenn er im sog. Quirks-Modus verwendet wird. Daher empfiehlt sich XHTML in der Variante strict. Wenn dies nicht möglich ist, können Browserweichen helfen.

Fazit

Durch CSS lassen sich auch ohne Grafiken und JavaScript ansehnliche Navigationsmenüs erzeugen. Ihre Formatierung als Listen verbessern die Struktur der Webseite.

Verweise