Teil 4: Mehrstufige Navigation im Eigenbau

Inhaltsabhängige Breite

In dem standardmäßig eingesetzten Style-sheet sind die Dimensionen der Menüs und Untermenüs fest definiert. Sollen die Navigationselemente anhand ihres tatsächlichen Textumfangs angelegt werden, muss man ein paar Korrekturen des CSS-Stylesheets umsetzen.

Dies kann durchaus erforderlich sein, wenn die Bezeichnung der Menüs im Voraus nicht feststeht (zum Beispiel, weil die Navigation dynamisch erzeugt wird) oder aus Worten verschiedener Länge besteht.

Standardkonforme Webbrowser, darunter aktuelle Versionen von Firefox, Google Chrome und Opera, kommen mit dieser Version der Navigation problemlos klar. Die erforderlichen Anpassungen des CSS-Stylesheets können Sie im Head-Abschnitt der Webseite direkt hinter dem Aufruf des CSS-Style-sheets eintragen:

Die vorgegebene Breite der Menüs und Untermenüs wird auf einen automatischen Wert gesetzt, der der Länge des jeweils größten Eintrags entspricht. Die letzte Korrektur stellt sicher, dass Grafiken, die den Menüaufbau kennzeichnen, den Text nicht überlagern können.

Wie fast zu erwarten, eröffnet diese Optimierung eine Pandora-Büchse von Fehlverhalten des Internet Explorers, der sich bis einschließlich Version 7 mit der Aufgabe überfordert fühlt.

Ein Versuch, die hasLayout- Eigenschaft zwangsweise zu aktivieren, führt diesmal nicht ans Ziel. Die einfachste Lösung besteht darin, dem Internet Explorer eine leichter verdauliche Version des CSS-Stylesheets mithilfe bedingter Kommentare zu servieren.

Jenseits der traditionellen Navigationsmenüs, die horizontal oder vertikal angelegt werden und mehrere Ebenen umfassen können, kommen noch andere Konzepte zum Einsatz, die das Anzeigen und Verbergen von Inhalten auf der Seite ermöglichen.

In diese Kategorie fallen unter anderem Tab-basierte und Akkordeon-basierte Navigationselemente. Der Einsatz anderer Spry-Widgets funktioniert nach demselben Konzept.

Solide Lösungen

Dank der Verfügbarkeit ausgereifter OpenSource- Frameworks für Ajax besteht kein zwingender Grund, für Ajax-basierte Web-Navigation die hohen Preise zu zahlen, die Hersteller mancher Plug-ins für ihre Ajax-Lösungen verlangen. Kommerzielle Plug-ins sind in der Regel entweder erschwinglich und unterdimensioniert oder qualitativ interessant und deutlich überteuert.

Open-Source-basierte Frameworks geben Ihnen die Gewissheit, dass Sie auch in Zukunft den benötigten Zugriff auf den ganzen Quelltext erhalten und nicht von der Verfügbarkeit einer proprietären Lösung abhängig sind.

Mit dem Dojo-, Google Web Toolkit-, Rico-, YUI- oder Spry-Framework hat man eine breite Auswahl an soliden Lösungen zur Verfügung.

Eine Empfehlung für eine bestimmte Lösung fällt schwer, da diese Entscheidung von den eigenen Schwerpunkten und Fähigkeiten abhängt. Wer etwa ohnehin mit Ruby on Rails arbeitet, der wird wahrscheinlich zu Prototype neigen (Prototype bildet die Basis des Javascript-Helpers von Rails). Optional käme dann auch Rico in Frage (ein Rich Ajax Framework auf der Basis von Prototype).

Eine andere denkbare Alternative bildet die Yahoo User Interface Library (YUI) in BSD-Lizenz. Für das Spry-Framework für Ajax sprechen die Kompatibilität mit der AIR-Laufzeitumgebung, die umfassend kommentierten Quelltexte und die vielseitigen Möglichkeiten visueller Optimierungen.