Hybride CSS Menüs

Das Original dieses Textes wurde zuerst am 30. März 2005 unter dem Titel Hybrid CSS Dropdowns im Online-Magazin A List Apart veröffentlicht. Der Autor ist Eric Shepherd. Die Übersetzung erfolgte mit Genehmigung von A List Apart und dem Autor.
Translated with the permission of A List Apart Magazine and the author.

Einleitung

Ich weiß schon, was Sie jetzt denken: "Brauchen wir wirklich noch einen weiteren Artikel über aufklappbare CSS-Menüs?" Aber lassen Sie sich überzeugen. Was wäre, wenn wir ein sauberes, klar strukturiertes Menü hätten, in dem die Dynamik und der einfache Code der Aufklappmenüs kombiniert sind, das aber gleichzeitig deren Hauptprobleme vermeidet?

Aufklappbare Menüs haben folgende Probleme:

Ihre Sekundäroptionen sind nicht zugänglich, solange man nicht das gesamte Menusystem aktiviert.
Sie geben dem Anwender keine ausreichende Orientierungshilfe. Innerhalb eines bestimmten Abschnittes einer Website zu navigieren kann schwierig werden, weil man zu jedem Seitenwechsel wieder das Menü herunter klappen muss.

Die hier vorgestellte Technik ist ein narrensicherer Weg, um die Verträglichkeit mit allen Browsern sicherzustellen. Zusätzlich bleibt die Nutzbarkeit erhalten: für Menschen, die ältere Browser verwenden oder die andere Zugänglichkeitsprobleme mit Aufklappmenüs haben; sei es aufgrund einer Behinderung oder weil sie mit aufklappbaren Menüs nicht zurecht kommen. Auch macht diese Technik es dem Nutzer einfacher, sich innerhalb der Website zu orientieren.

Hier ist eine Warnung angebracht. Extrem lange Listen sind eine Herausforderung für jedes aufklappbare Menü: entweder funktionieren sie optimal oder sie brechen unter der Masse ihrer Listenpunkte zusammen. Auch diese Technik funktioniert weniger gut für Listen mit vielen Listenpunkten.

Wir wollen jetzt eine horizontale Navigationsleiste entwickeln, die zwei Ebenen der Navigation bedient, in unserem Beispiel die Hauptthemen und ihre Unterpunkte. Durch das Herunterklappen erlaubt unser Menü Zugang zu allen Seiten auf beiden Navigationsebenen. Es zeigt dem Nutzer immer, wo innerhalb der Website er/sie sich gerade befindet, sieht sauber aus und lädt schnell.

Klingt das gut? Dann los.

Zuerst brauchen wir eine Liste

Wir beginnen mit einer Liste architektonischer Zeitabschnitte und einigen ihrer bekanntesten Vertreter. Dem Element ul geben wir einen Identifizierer und die Hauptlistenpunkte ergänzen wir um die Klassen off und on. (Dies ist vielleicht nicht die beste Lösung, sie erfüllt aber den Zweck dieses Artikels.)

<ul id="nav"> <li class="off"><a href="#">Renaissance</a> <ul> <li><a href="#">Brunelleschi</a></li> <li><a href="#">Alberti</a></li> <li><a href="#">Palladio</a></li> <li><a href="#">Michelangelo</a></li> <li><a href="#">Bramante</a></li> </ul></li> <li class="off"><a href="#">Art Nouveau</a> <ul> <li><a href="#">Mackintosh</a></li> <li><a href="#">Guimard</a></li> <li><a href="#">Horta</a></li> <li><a href="#">van de Velde</a></li> </ul></li> <li class="on"><a href="#">Modern</a> <ul> <li><a href="#">Sullivan</a></li> <li><a href="#">Le Corbusier</a></li> <li><a href="#">Mies</a></li> <li><a href="#">Gropius</a></li> <li><a href="#">Yamasaki</a></li> </ul></li> <li class="off"><a href="#">Postmodern</a> <ul> <li><a href="#">Venturi</a></li> <li><a href="#">Eisenman</a></li> <li><a href="#">Stern</a></li> <li><a href="#">Graves</a></li> <li><a href="#">Gehry</a></li> </ul></li> <li class="off"><a href="#">Digital</a> <ul> <li><a href="#">Xenakis</a></li> <li><a href="#">Lynn</a></li> <li><a href="#">Diller+Scofidio</a></li> <li><a href="#">Zellner</a></li> <li><a href="#">Hadid</a></li> </ul></li> </ul>

Weiter geht's mit Stil

Wir haben nun ein einfaches, semantisches Markup, genau richtig, um unser CSS daran anzubringen. Es ist wartungsfreundlich, zusammenhängend und sieht genauso aus, wie man es erwarten würde.

Zunächst stellen wir die Menüpunkte der Primärnavigation mit Hilfe von float horizontal nebeneinander und verstecken alle nachgeordneten Listen. Gleichzeitig definieren wir Schriftfarbe, Schriftgewicht und den Rahmen der Links.

#nav li { /* floaten der Hauptlistenpunkte */ margin: 0; float: left; display: block; padding-right: 15px; } #nav li.off ul, #nav li.on ul { /* Verstecken der Untermenüs */ display: none; } #nav li a { /* Für alle Links in der Liste */ color: #f90; font-weight: bold; display: block; height: 15px; width: 100px; border: 1px solid #29497b; padding: 5px; }

Danach positionieren wir die Elemente unserer zweiten Menüebene unterhalb der Hauptliste, so dass sie gleich am richtigen Platz stehen, wenn sie angezeigt werden.

#nav li.off ul, #nav li.on ul { /* Subnavs positionieren und verstecken */ display: none; position: absolute; top: 33px; height: 15px; left: 0; padding-top: 10px; }

Zum Schluss stellen wir noch die Unternavigation für den aktuellen Menüpunkt 'Modern' dar. Wenn das ganze Menu komplett in einer Datei untergebracht werden soll, geht dies am Besten mit einer eindeutigen Klasse, z. B. modern, am Element body und einigen passenden Selektoren.

Dieser Artikel wird innerhalb des body einer fremden Website veröffentlicht und sollte daher nicht darauf angewiesen sein. Wir geben deshalb dem Link des aktiven Listenpunktes die Klasse on und den Links der inaktiven Listenpunkte die Klasse off.

#nav li.on a { /* Rahmenfarbe für aktive Fläche ändern */ border: 1px solid #f90; } #nav li.on ul a, #nav li.off ul a { /* Vererbung des Rahmens für Untermenü des aktiven Themas unterdrücken */ border: 0; } #nav li.on ul { /* Liste des aktiven Untermenüs ausgeben */ display: block; }

Wir definieren noch einige Rahmen dazu und können uns das bisherige Ergebnis anschauen.

Rollovers mit einem Ausfall

Jetzt aktivieren wir den Rollover. Das geht ähnlich vor sich wie in allen anderen CSS-Menüleisten auch. Der Hover wird am Element li angebracht, was ein Problem für den IE/Win bedeutet, dank seiner armseligen Umsetzung der Pseudoklasse :hover. Dazu kommen wir aber weiter unten noch. Das folgende CSS entfernt den Rahmen der Sekundärnavigation und stellt die aktive Subnavigation so ein, dass sie immer dargestellt wird, sobald wir ihr Elternelement mit der Maus überfahren. Zusätzlich deklarieren wir noch den Z-Index, um ganz sicher zu gehen, dass die Hovers in der Darstellung immer Vorrang vor der aktiven Subnavigation haben.

#nav li.on ul a, #nav li.off ul a { float: left; /* IE vererbt den Float nicht */ border: 0; color: #f90; width: auto; margin-right: 15px; } #nav li.on ul { /* Aktuelle Thema anzeigen */ display: block; } #nav li.off:hover ul { /* Die anderen Themen anzeigen bei hover über dem Elternmenü */ display: block; z-index: 6000; }

Die gehoverten Tabs machen wir mit einem Hintergrund noch ein wenig benutzerfreundlicher:

#nav li.off a:hover, #nav li.off:hover a { background: #29497b; color: #f90; }

Unser Beispiel sieht jetzt so aus.

Ein Entgegenkommen für unsere 'speziellen' (Browser-)Freunde

Für Browser wie IE/Win, die :hover nur am Element a darstellen, haben wir zwei Optionen.

In dem Wissen, dass in einigen Jahren, wenn alle Browser die Pseudoklasse :hover unterstützen, alle Navigationsmöglichkeiten für alle Nutzer sichtbar und zugänglich sein werden, können wir das Menü so lassen, wie es jetzt ist.
Wir können aber auch ein wenig JavaScript einarbeiten, um die CSS-Selektoren in eine Sprache zu übertragen, die der IE/Win versteht und damit den Aufklappmechanismus für alle zugänglich machen.

Dazu müssen wir zunächst die Positionierung für den IE/Win ein wenig anpassen, indem wir den *-Hack verwenden.

#nav li.off ul, #nav li.on ul { /* Subnav nach unten verschieben */ top: 33px; *top: 44px; /* Repositionierung für IE */ }

In modernen standardstreuen Browsern funktioniert es soweit sehr gut, in IE/Win 5 und IE/Win 6 dagegen, bei korrekter Positionierung, nur auf eine weniger qualifizerte, aber funktionelle, Weise. Mit ein wenig JavaScript-Hilfe läuft auch im IE/Win alles tadellos. Das folgende einfache Script schreibt die Hovers um in Mouseover-Events. Es funktioniert für alle Versionen des IE/Win 5.x und 6.x. Vielen Dank an Patrick Griffiths und Dan Webb, deren Artikel über Suckerfish-Dropdows mir den Anstoß gab, mich mit CSS-basierten Menüsystemen zu befassen. Ihr JavaScript-Schnipsel sieht so aus:

startList = function() { if (document.all && document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace (" over", ""); } } } } } window.onload=startList;

Jetzt fügen wir für alle Listenelemente, für die :hover deklariert ist, noch schnell die Klasse over ein. Damit funtioniert die Liste für IE-Nutzer ebenso gut wie für alle anderen.

#nav li.off:hover ul, #nav li.over ul { display: block; z-index: 6000; } #nav li.off a:hover, #nav li:hover a, #nav li.over a { background: #29497b; color: #f90; }

Nicht, dass wir die Möglichkeit einer neuen Version des IE/Win aus den Augen verlieren sollten, aber im Moment wollen wir die Massen weiter so bedienen, wie sie es gewohnt sind.

So, das war's. Gegenüber den bisher bekannten CSS-Aufklappmenüs bietet dieses Verfahren vielleicht nur eine kleine Änderung. Es liefert uns aber eine andere Sichtweise, von der aus wir die Fälle ausloten können, bei denen es hilfreich ist, wenn die Auswahlmöglichkeiten sichtbar sind und nicht durch hover erst herunter geklappt werden müssen.

Aber kann das auch gut aussehen?

Gut, das war es noch nicht ganz. Ich kann Sie nicht ohne eine grafisch verbesserte Version verlassen, mit der diese Technik in die Praxis übertragen wird. Mit ein paar zusätzlichen Änderungen, der Zusammenfassung der notwendigen Hintergrundgrafiken in einer einzigen Grafik, etwas mehr CSS und einem Photo, dass ich irgendwann einmal in New York gemacht habe, erhalten wir ein Menüsystem, das die tatsächlichen Möglichkeiten von CSS in Verbindung mit grafischem Design anschaulich macht. Das abschließende Beispiel ist in allen modernen Browsern voll funktionsfähig.
Author: Eric Shepherd
Translation: kl

Nachträge Dez. 2006:

Der Autor merkt in einem Beitrag seines eigenen Weblogs an, dass die beiden Teile des Menüs sich im Safari ein klein wenig überlappen. Das beeinträchtigt nicht die Funktionalität des Menüs und ist auf einen Fehler des Safari, nicht auf einen Designfehler, zurückzuführen.
Im Internet Explorer 7 funktioniert das letzte Beispiel nicht korrekt. Der untere Teil des Menüs wird um einige Pixel nach rechts geschoben. Bisher gibt es dafür noch keine Lösung.
Außerdem wird berichtet, dass das Menü den Pop-Up-Blocker des IE 6 aktivieren könne. Ich selbst habe diese Erfahrung nicht gemacht, möglicherweise wirken hier die Dimensionen eines Menüteils im Zusammenhang mit der Aktivierung durch JavaScript als Auslöser. Eine Änderung der Abmessungen würde in dem Fall helfen. Hinweise gibt auch Microsoft's Seite zum Po-Up-Blocker.
TOP

Hinweis:
'Hybride' bedeutet Kreuzung oder Mischung aus verschiedenen Ursprüngen. In diesem Fall weist der Ausdruck darauf hin, dass verschiedene Techniken zum Einsatz kommen.

Hinweis:
Das Original dieses Textes wurde zuerst am 30. März 2005 unter dem Titel Hybrid CSS Dropdowns im Online-Magazin A List Apart veröffentlicht. Der Autor ist Eric Shepherd. Die Übersetzung erfolgte mit Genehmigung von A List Apart und dem Autor.
Translated with the permission of A List Apart Magazine and the author.

Notizen: