Optimierung der Navigation - Popup-Menü

Was ist ein Popup- oder Ausklapp-Menü?

Ein Ausklapp-Menü, wahlweise auch Popup- oder Dropdown-Menü genannt, zeigt beim Darüberfahren mit der Maus seine Untermenüs und deren Unter-Untermenüs in einer leicht versetzten Weise an. Sie sparen somit Platz und schaffen zudem Übersicht, indem Sie mit der Maus über alle Menüeinträge einer Navigationsleiste einer Webseite fahren, ohne auf einen Eintrag zu klicken. Es gibt diese Menüs sowohl in vertikaler als auch in horizontaler Anordnung.

Ein von mir eigenhändig programmiertes Beispiel mit vertikaler Anordnung des Menüs finden Sie z.B. unter der Adresse

http://www.propan.com/de/start.html .

Die Technik, die dahinter steckt, nennt sich dynamic HTML (DHTML), eine Kombination aus Stylesheet-Anweisungen und JavaScript. Damit werden Boxen oder Container erzeugt, pixelgenau platziert, formatiert und auch farbig animiert. Da die benötigten Daten zum Aufbau der Navigation im Browser-Cache des Besuchers abgelegt werden, muss die Webseite nur einmal geladen werden.

Wie lässt sich ein solches Menü realisieren?

Im Internet gibt es zahlreiche frei verfügbare Scripte, in den meisten Fällen auf Basis JavaScript. Diese haben gegenüber den ebenfalls angebotenen PHP- oder ASP.Net-Scripten den Vorteil, dass sie auch offline (z.B. auf einem Datenträger wie einer CD-ROM ) funktionieren. Es genügt bereits ein Browser ab der 4. Generation, d.h. bei einem modernen Browser - auch ab Opera 7.5 - gibt es eigentlich keine Darstellungsprobleme.

Mit Dreamweaver ab Version MX lässt sich ein Popup oder Ausklapp-Menü bequem erstellen. Ausgangspunkt ist z.B. ein Text-Link oder ein Grafik-Button. Weiterer Vorteil des Dreamweaver-Menüs: Das Menü lässt sich auch außerhalb von Dreamweaver editieren und nachträglich "tunen". Und mit etwas Know-how kann ein Popup-Menü sogar frame-übergreifend programmiert werden.

Einziger kleiner Nachteil: Der übliche MouseOver-Cursor in Form einer Hand ist z.B. im Firefox-Browser nicht sichtbar. Stattdessen sieht man nur den unattraktiven Textmarkierungs-Cursor in Form eines senkrechten Strichs.

Abhilfe schafft eine kleine Änderung im Quellcode des durch Dreamweaver erzeugten Basis-Scripts mit der Bezeichnung "mm_menu.js"

Ersetzen Sie in Zeile 380 des Original-JavaScripts "mm_menu.js" die Zeile

l.style.cursor = "hand";

durch die neue Zeile

l.style.cursor = "pointer" || "hand";

und somit ist das kleine Problem schnell gelöst.

Aus Fireworks heraus, dem Grafikprogramm von Macromedia/Adobe, lässt sich ein Popup-Menü als schlanke CSS-Anweisungen mit wesentlich geringerem Speicherplatzbedarf als die oben vorgestellte Dreamweaver-Variante exportieren.