Das Dromedar-Menü

Vielleicht ein verrückter Name, aber ein passenderer fiel mir nicht ein. Eigentlich handelt es sich um ein Tab-Menü mit ein paar Besonderheiten. Das Designproblem lässt sich kurz folgendermaßen umschreiben: Wir haben einen durchscheinenden Hintergrund (body) Das horizontale Menü geht folgendermaßen in den Content über: Die Menübuttons setzen auf den Content-Bereich auf. Ein Rahmen läuft um den Content öffnet sich zum aktuellen Button, umschließt diesen und läuft dann weiter um den Content. Zwischen den Button ist ein Abstand von 4px, der ebenfalls durch den Content-Rahmen überbrückt werden muss. Der Abstand scheint stärker durch als die Button und der Content, dessen Transparenz und Farbe gleich ist. Analoges gilt, wenn man über einen weiteren Button mit der Maus geht. Da taucht sozusagen ein zweites Dromedar auf oder aus dem Dromedar wird ein Kamel. Die Menüleiste soll dabei natürlich mit dem Contentbereich bündig abschließen. Das Ganze sieht etwa so aus:

Das sieht sehr schlicht aus, das soll es auch. Die Schwierigkeiten zum einen bei der Realisierung liegen in der geschlossenen Umrahmung, die auch nicht durch die transparente Abstände zwischen den Menüpunkten unterbrochen werden darf und zum anderen im bündigen Abschluss links und rechts mit dem Contenbereich. Wenn man mit der Maus z. B. über DIE PREISE geht, ergibt sich das „Kamelbild“:Menüleiste2Wie erzeugt man nun die Rahmen um die Menüpunkte beim Mouseover bzw. beim Anklicken. Die Antwort ist einfach: sie sind schon vorhanden, nur geben wir dem Rand oben, links und rechts den Farbwert transparent und unten den Farbwert der anderen Rahmen, in unserem Fall #248B9C.

 .menu > ul > li {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #248B9C;
    border-style: solid;
    border-width: 1px;
    height: 40px;
    margin-left: 4px; /*der Außenabstand zum nächsten Menüpunkt*/
    padding: 0 11px; /*zu dieser Einstellung komme ich später*/
}

Erst beim Anklicken oder beim Mouseover erfolgt die entsprechende Einfärbung bzw. die Umschaltung auf Transparenz für den unteren Rand:

#access > .menu > ul > li.current_page_item,
#access > .menu > ul > li:hover{
    border-color: #248B9C #248B9C rgba(0, 0, 0, 0);
}

Wie überbrückt man nun die Abstände zwischen den Menüpunkten mit dem gleichen Rand wie die übrigen Abschnitte. border-top des Content muss man natürlich total ausblenden, den oberen Rand des Content kann man nur durch einen unteren Rand der Menüpunkte (li) erzeugen, wie oben gezeigt.

Menüleiste3

Dann haben wir aber zwischen den Menüpunkten die 4px-Lücke im Rand, der ja optisch wie der obere Rand des content aussehen soll. Das kann man nun so realisieren, dass man mit Hilfe des Pseudoselektors :after hinter jedem li ein 4px-Stück anhängt, z. B. so:

.menu > ul > li:after {content:“ „; width:4px:heigth:4px;background-color:red;float:right;}Menüleiste4Um die Lage der „Brücke“ genau zu erkennen habe ich sie 4px hoch gemacht und rot eingefärbt. Wenn wir wir die Höhe auf 1px setzen wie die Umrandung von li, so erkennen wir, dass wir nicht nur die vertikale Positionierung sondern auch die horizontale etwas anpassen müssen:

#access > .menu > ul > li:after {
    background-color:  red;
    bottom: -2px;
    content: „“;
    float: right;
    height: 1px;
    position: relative;
    right: -16px;
    width: 5px;
}

Nun stellt sich heraus, dass noch eine winzige 1px-Lücke bleibt, die man dadurch überbrücken kann, dass man width auf 5px setzt. Das hängt mit der Abstandsberechnung bei Vorhandensein eines 1px-Randes (wenn auch unsichtbar) zusammen. Wer mag, kann das exakt in der CSS-Spezifikation überprüfen. Statt der Brücke eine Backgroundfarbe zu geben, kann man ihr auch einen unteren Rand verpassen. Das bietet etwas mehr Flexibilität bei der Randgestaltung insgesamt.

Nun müsste eigentlich noch ein Stück Brücke über die Menüleiste hinausragen, denn li:after wirkt ja auf jedes Element. Wir haben das dadurch unterdrückt, dass wir das letzte Element noch einmal gesondert behandelt haben:

#access > .menu > ul > li:last-child:after {
    content: „“;
    width: 0;
}

Dies ist wohl die einzige Aktion, bei der CSS 3 benötigt wird.

Nun darf man fragen, warum das alles so haargenau in die Content-Breite bzw. Header-Breite passt. Das muss tatsächlich für jede Menüänderung, jeden Schriftartwechsel u. ä. angepasst werden. Hierfür ist das padding: 0 11px; verantwortlich. Aber es wäre Zufall, wenn es dadurch zu einem genauen Randabschluss käme. Wir brauchen noch eine Feinjustierung. Diese nehmen wir am ersten Menüelement folgendermaßen vor:

.menu > ul > li:first-child a {
    margin-left: 7px;
    margin-right: 6px;
}

Wir greifen hier auf margin und a zurück, dadurch wird die Positionierung der Lücke nicht mehr beeinflusst. Ihr seht, dass man so pixelgenau die Menüleiste über den Content-Rand zum Abschluss bringen kann.

Das ist natürlich alles nicht mehr lustig, wenn man eine Website hat, an der ständig am Menü herumgedreht werden muss, aber bei vielen starren Firmenseiten ist das meistens über einen längeren Zeitraum nicht nötig. Diese Menügestaltung ist mir von einem Kunden vor etlichen Jahren vorgegeben worden. Ich fand sie witzig und eine Herausforderung. Leider ist es damals nicht zum Abschluss des Projekts gekommen und so schlummerte sie einige Zeit, bis ich sie für einen neuen Kunden recht passend fand und sie doch richtig einsetzen konnte. Wer es also life sehen möchte, kann sich diese Seite in Ruhe anssehen: http://physio-zillmer.de Wenn so ein bisschen Werbung für den Kunden entsteht, spricht nichts dagegen.

Warum nun das kleine Firmenlogo am Ende der Menüleiste. Ich könnte sagen, sieht doch witzig aus oder?  Aber der Anlass für dieses Styling ist ein anderer. Das passgenau Menü muss man für fast jede Browser-Engine neu justieren und natürlich für die mobilen Geräte, wenn man Lust hat. Das mag auch daran liegen, dass hier eine besondere Schriftart verwendet wird, bei einer Webstandard-Schrift mag sich das in Grenzen halten. Auf jeden Fall kann es immer wieder passieren, dass der Abschluss nicht so haargenau ist und deshalb zur Verdeckung eines solchen schweren Mangels, am Menü-Ende. das Logo oder ein Blümchen oder …

Zum Abschluss noch eine Variante, die den „Dromedar-Charaker“ des Designs noch besser hervorhebt. Wenn wir die CSS 3-Eigenschaft border-radius zum Einsatz bringen, kann es z. B. auch so aussehen:

Menüleiste5