20.Feb 2007
Schräge Menus mit CSS

Schräge Menüs lassen sich einfach mit Imagemaps implementieren. Will man sie aber CSS-konform und als Listenstruktur, kann man einen kleinen Trick anwenden. Dabei werden die diagonal verlaufenden Menüpunkt aus vielen kleinen spans zusammengesetzt. Diese werden dann in der jeweiligen Position angeordnet.

Zur Verdeutlichung sind die span-Felder bei einem Eintrag rot umrahmt. Die Grafik für jeden Menüpunkt sind einmal erstellt und dann nur in der Position angepasst. Der Aufbau ist folgendermaßen:

//Stylesheet-Beispiel fuer ein 40x40-Feld
#menu #menupunkt span {
  position: absolute;
  width: 40px;
  height: 40px;
  display: block;
  background-repeat: no-repeat;
  background-image: url('menupunkt1.gif');
}

#menu .position1 {
  left: 0px;
  top: 60px;
  background-position: 0px -60px; 
}

// HTML
<ul id="menu">
  <li id="menupunkt">
    <a href="xyz">
      <span class="verstecktertitel">Menupunkt</span>
      <span class="position1"></span>
      <span class="position2"></span>
      ...
    </a>
  </li>
  ...
</ul>

Idealerweise fügt man den einzelnen Listenpunkten noch ein unsichtbares span an, welches den Titel enthält (siehe Beispiel).