barrierefreies Webdesign Ingo Turski

zum Inhalt

Ingo

Tips und Tricks:CSS-formatierte Liste als 3D-Menü

In diesem Beitrag möchte ich erklären, wie grafisch wirkende 3D-Effekte über CSS realisiert werden können und auf diese Weise ein ansprechendes Text-Menü ohne Verwendung von Grafiken gestaltet werden kann.

Die hierzu verwendete (unsortierte) Liste <ul> bietet mehrere Vorteile:

Zur Erklärung des 3D-Effektes formatiere ich zunächst einen einfachen Textlink als Button:

klick mich
<style type="text/css">
a#button {
  display:block; width:120px; height:1.3em; padding:3px;
  text-align:center; font-weight:bold; text-decoration:none;
}
a#button:link, a#button:visited {
  color:#000; background-color:#ccc;
  border-left:2px solid #fff; border-top:2px solid #fff;
  border-right:2px solid #000; border-bottom:2px solid #000;
}
a#button:hover {
  color:#000; background-color:#bbb; padding:4px 2px 2px 4px;
  border-left:2px solid #666; border-top:2px solid #666;
  border-right:2px solid #ccc; border-bottom:2px solid #ccc;
}
a#button:active {
  color:#fff; background-color:#999;
  border-left:2px solid #000; border-top:2px solid #000;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
</style>

...
<a href="#button" id="button">klick mich</a>

Um dem Link Breite und Höhe zuweisen zu können, wird a {display:block;} formatiert.
Die hellen Ränder links+oben und dunklen Ränder rechts+unten simulieren eine Lichtquelle und erzeugen den räumlichen Effekt. Beim "Hovern" werden die "Lichter" und "Schatten" einfach getauscht und der Kontrast dabei leicht gemildert. Die leicht reduzierte Helligkeit des Hintergrundes sowie geringe Verschiebung des Textes über die padding-Angaben verstärkt den Effekt. Beim Aktivieren schließlich werden die Kontraste der Ränder maximiert, der Hintergrund weiter abgedunkelt und der Text zur Bestätigung noch gehighlighted.

Link-Listen lassen sich vielseitiger formatieren, da hierzu die drei Elemente <ul>, <li> und <a> zur Verfügung stehen.
Zu dem folgenden Menü wurde ich inspiriert von einer vertikalen Linkliste von Eric Meyer (genauer gesagt von den markanten Blöcken am linken Rand und dem im Internet Explorer fälschlich angezeigten Abstand der Menüpunkte) sowie den 3D-Effekten einer horizontalen Linkliste von Claire Campbell. Beide Listen sind in meiner Button-Demo im Original zu sehen.
Die Farben sind hier für einen blauen bis blaugrünen Seitenhintergrund gewählt:

<style type="text/css">

/* Imenu [blau]: 2003 by Ingo Turski (www.1ngo.de) */
/* inspiriert durch Eric Meyer und Claire Campbell */
/* ----------------------------------------------- */

body {
  font-size:100.1%; color:white; background:#39c;
}

ul.imenue {
  color:white; background:#069;
  border-bottom:0.2em solid #069; border-right:0.2em solid #069;
  padding:0 1px; margin-left:0;
  width:12em; font:normal 0.8em Verdana, sans-serif;
}

.imenue li {
  list-style:none; margin:0; font-size:1em;
}

.imenue li a, .imenue li span {
  display:block;
  text-decoration:none;
  margin-bottom:0.5em; margin-top:0.5em;
  color:white; background:#39c;
  border-width:1px; border-style:solid; border-color:#5bd #035 #068 #6cf;
  border-left:1em solid #fc0;
  padding:0.25em 0.5em 0.4em 0.75em;
}

.imenue li span {
  color:white; background:#069;
  border-color:#069 #6cf #5bd #f30;
  padding:0.4em 0.35em 0.25em 0.9em;
}

.imenue li a.aktuell {
  border-color:#5bd #035 #068 #f30;
}

.imenue li a, .imenue li span {
  width:99%;
/* Weitenangabe für den Internet Explorer zur Ausdehnung des Linkbereiches */
}

html>body .imenue li a, html>body .imenue li span {
  width:auto;
/* die (falsche) Weitenangabe für standardkonforme Browser zurücknehmen */
}

.imenue li a:hover, .imenue li a.aktuell:hover {
  background:#28b;
  border-color:#069 #6cf #5bd #fc0;
  padding:0.4em 0.35em 0.25em 0.9em;
}

.imenue li a:active, .imenue li a.aktuell:active {
  background:#069;
  border-color:#069 #6cf #5bd white;
  padding:0.4em 0.35em 0.25em 0.9em;
}
</style>

...

<ul class="imenue">
  <li><strong><a href="http://www.1ngo.de/web/">Ingo Turski</a></strong></li>
  <li><a href="#">normaler Link</a></li>
  <li><span>akt. Menüpunkt</span></li>
  <li><a href="#">Linktext mit Zeilenumbruch</a></li>
  <li><a class="aktuell" href="#">aktueller Link</a></li>
  <li><a href="#">normaler Link</a></li>
</ul>

Die <ul> Liste selbst bekommt hier einen unteren und rechten Rand sowie eine Hintergrundfarbe. Über margin-bottom des <a> bzw. <span> Elements werden die vertikalen Abstände der Menüpunkte definiert; damit der IE diese beim "hovern" beibehält, ist zusätzlich margin-top anzugeben. Das Bullet der <li> Listenelemente wird über list-style:none; entfernt.
Die 3D-Effekte werden wie im ersten Beispiel erzeugt, wobei ich diesmal mit border-color eine verkürzte Schreibweise verwendet habe. Neu ist hier der andersfarbige linke Block, der über einen 1em breiten border-left erzeugt und z.B. zur Bestätigung des Anklickens weiss gefärbt wird.
Ein aktiver, also nicht verlinkter Menüpunkt wird einfach von einem <span> umschlossen und dann über CSS dunkel ("tief eingedrückt") und mit rotem Block formatiert. Für (ebenfalls mit rotem Block) besonders hervorzuhebende Links dient die Klasse aktuell.

Bis auf die schmalen 1px Ränder sind sämtliche Größen relativ in em angegeben, wodurch das Menü sich flexibel an Schriftgrößeneinstellungen anpaßt. Ein Bug im Internet-Explorer macht hierzu die Angabe einer Schriftgröße in % für <body> oder ein umschließendes <div> erforderlich!
Leider benötigt der Internet Explorer zur Ausdehnung des Linkbereiches eine Weitenangabe. Man kann zwar wie Eric Meyer darauf verzichten, dann ist aber - etwas verwirrend - im IE nur der Textbereich "anklickbar". Ich habe die Breite mit width:99%; für sein falsches Box-Modell angegeben, das er selbst in der Version 6 im "quirks mode" noch hat, und über den Child-Selektor (den er nicht kennt) für standardkonforme Browser wieder zurückgesetzt. Für den standardkonformen Modus des IE 6 (bei vollständigem DOCTYPE in der ersten Zeile) müßte die korrekte Weitenangabe für ihn angegeben (und vor früheren Versionen versteckt) werden, z.B. über den Tantek-Hack:

.imenue li a, .imenue li span {
  voice-family: "\"}\"";
  voice-family: inherit;
  width:9.6em;
}

Mein Code-Generator für ein barrierefreies CSS-Layout stellt das Menü auch in anderen Farben zur Verfügung.
Außer diesem Menü finden Sie viele weitere CSS-formatierte Link-Listen bei Listamatic.