Pulldown-Menü Deluxe (JS/DOM)

[seb]

Meine Pulldown-Menü-Klasse für IE5+ und die Mozilla-Familie.

Unter Opera funktioniert es leider (noch) nicht korrekt.

Features:

• Kompakter, effizienter Code durch objektorientiertes Design
• Minimaler Implementierungsaufwand und unproblematischer Betrieb neben anderen Scripts
• Beliebig viele Menüs pro Seite
• Beliebig tiefe Verschachtelung
• Für jedes einzelne Menüfeld individuell konfigurierbares Design (Farben, Schrift, Icons)
• 'Checkbox'-Funktionalität (Menüeinträge mit Häckchen)

Demo

Installation

1. angehängte JS-Datei einbinden

2. Pfad zu den verwendeten Icons angeben:

var URL_PDM_ICONS = 'http://www.meinesite.de/pulldownmenu_images/'; 

3. Menü erstellen per

menu = new Pulldownmenu(id); 

id gibt die HTML-ID des Menüs an und muss mit dem Variablennamen identisch sein. Richtig wäre also z.B.

menu = new Pulldownmenu('menu');

oder

pdm_edit = new Pulldownmenu('pdm_edit'); 

4. Menüeinträge hinzufügen per:

menu.add_item(url, caption, icon, zielframe, submenu_id); 

url = Link-Adresse des Menüpunkts
caption = Beschriftung (optional, wenn nichts angegeben, wird URL angezeigt)
icon = Icon für den Eintrag (optional)
zielframe = Name des Frames, in dem der Link geöffnet werden soll (optional)

Achtung: Wenn es sich nicht um einen Iframe im selben Dokument wie das Menü handelt, sondern um einen 'normalen' (im Frameset auf gleicher Ebene mit der Menü-Seite), muss der Framename mit 'parent.framename' angegeben werden.

submenu_id = ID des Menüs, das von diesem Eintrag als Untermenü geöffnet werden soll (optional)


5. Menüdesign mit CSS anpassen

Dieser Anleitungsschritt ist ein nachträglicher Einschub: Ein Beispiel für CSS-Definitionen für das Menü findet ihr weiter hinten im Thread (Seite 2).

Bei Gelegenheit werd ich den Dateianhang um dieses Beispiel-CSS und eine Installationsanleitung erweitern, so dass man das mit dem Downloadpäckchen auch unabhängig von diesem Forenthread etwas anfangen kann.


6. Menü aufrufen

menu.show(x,y); 

HTML-Beispiel:

<div onmouseover="menu.show(this.offsetLeft, this.offsetTop + 19);">Menü zeigen</div> 

[Lars]

Original geschrieben von seb
Unter Opera funktioniert es leider (noch) nicht korrekt.

In Safari hingegen funktioniert es hingegen einwandfrei, meine Hochachtung.

[seb]

Ich weiß auch nicht, woran es in Opera hängt.

Ein einzelnes Menü ohne Untermenüs funktioniert, aber sobald man mehrere ins Spiel bringt, gibts nurnoch Chaos.

[holunda]

Hi Seb!

Klasse Ding!

Kommt mir genau recht bei meinem neuen Projekt. Wollte es in prefix' Design einbauen im Bannermenü. Hier zu sehen: http://www.traum-projekt.com/forum/s...threadid=30963

Im MOz alles perfekt. im IE werden die Menüs nicht unterhalb der Links angezeigt sondern gehen dabei von linken Rand aus.

Was ist da falsch?
Gruß
Alex

[seb]

Öhm...um welche IE-Version handelt es sich?

Bei mir (IE6 von WinXP Pro SP1) geht's perfekt.

Es gibt übrigens eine neue Version mit folgenden kleinen Verbesserungen:

• Angabe des Ziel-Frames für einen Menülink
• Icons deaktivierbar
• Optionaler Schlagschatten-Effekt (IE-only)
• automatische Verwendung der Link-URL als Beschriftung wenn keine angegeben
• Beseitigung eines Bugs, wegen dem sich ein Menü unter bestimmten Umständen nicht mehr automatisch geschlossen hat, wenn man es mit der Maus verlassen hat

Ich lad das neue File mal im ersten Beitrag anstelle des alten hoch.

[holunda]

Hi Seb!

Es handelt sich um 6.0. Teste bitte mal was passiert wenn du 2 Menüs gleich untereinander hast die beide noch ein Submenü haben. Bleibt bei dir da auch immer 1 Layer wenn du von beiden weg gehst stehen?

Alex

[seb]

Seit dem Update öffnen sich bie mir auch keine Submenüs mehr! Muss ich vermutlihc was einstellen und bin zu blöd dazu?

Die Reihenfolge der Argumente von add_item() hat sich geändert bzw. es ist der Name des Zielframes dazugekommen, und zwar zwischen Icon und Submenü-ID (ich denke, dass die Argumente so gut nach der Wichtigkeit bzw. Häufigkeit der Verwendung sortiert sind, so dass man oft die hinteren weglassen kann, wenn man sie nicht braucht).

es muss also jetzt so aussehen:

menu.add_item(url, caption, icon, target_frame, submenu_id); 

Die Submenüs gehen bei dir deshalb nicht mehr, weil die Angabe bei dir jetzt als Zielframe gewertet wird und submenu_id garnicht angegeben ist.

Argumente, die du nicht brauchst, kannst du mit '' (leere Anführungsstriche) oder false überspringen. Ein Menüeintrag ohne Icon und ohne Zielframe, aber mit Submenü-ID muss also so aussehen:

menu.add_item('http://irgendwas', 'Beschriftung', 'icon.gif', false, false, 'submenu_id'); 

[holunda]

Könntest du da nochmal drüberschaun.

1) Wenn ich 2 Menüs mit jeweils UNtermnüs direkt unereinander platziere und dann beide überfahre, dann bleibt immer 1 Submenü offen. Layer bleibt stehen.

2) Wieso das im IE 6.0 XP falsch dargestellt wird.

danke
Alex

[seb]

Wenn ich 2 Menüs mit jeweils UNtermnüs direkt unereinander platziere und dann beide überfahre, dann bleibt immer 1 Submenü offen. Layer bleibt stehen.

Oh...danke für den Hinweis. Bug ist behoben, neue Version hochgeladen.

Aber mit dem IE-Problem kann ich dir leider nicht weiterhelfen.

Die Position der Untermenüs wird über die Eigenschaften .offsetLeft, .offsetTop, .offsetWidth und .offsetHeight der jeweiligen Tabellenzelle (Menüpunkt) des öffnenden Menüs bestimmt.

Möglicherweise hat deine IE-Version an dieser Stelle Probleme.
Beheben kann ich das zunächst nicht, denn erstens müsste man sicher wissen, woran es hängt und zweitens eine Alternative finden.

Falls das noch jemand anders liest - wie sieht's mit euren IE-Versionen aus?

Hier nochmal der Link zur Demo:

http://www.gy-mi.de/pulldownmenu.html

[holunda]

Habs jetzt zuhause getestet:
im IE 6.0 funzts auch mit anderer positionierung ....
Opera 6.0 öffnet mir kein menü
Moz 1.3 => perfekt

NS 4.78 funzt nicht aber lustige Darstellung.

Kann es sein dass du beim erneuten Update doch was für die Posiionierung geändert hast? Jetzt gehts bei mir auch ...

Gruß
Alex

[seb]

Opera 6.0 öffnet mir kein menü

Ich weiß - in Opera spinnt es total.

NS 4.78 funzt nicht

Hä? NS 4.78? Was ist das?

Kann es sein dass du beim erneuten Update doch was für die Posiionierung geändert hast?

Nee...aber schön, dass es jetzt geht

[holunda]

eben nicht ...

Testsite:
www.hard-soft.at/test/test.php

Jetzt gehts im IE 6 aber im Moz nicht mehr richtig .... Funktionieren schon nur es wird falsch positioniert.

Alex

[holunda]

Kann es sein, dass dein Menü einen kleinen Fehler hat? Immer wenn ich einen Reload mache und danach das Menü überfahre springt es im Moziall 1.3 so komisch. Auch der Seiteninhalt fängt dann an so komisch zu "hüpfen".

Keine Ahnung wie ich es sonst erklären soll.

mfg Alex

[seb]

Ich kann leider nur nochmals erklären, dass es bei mir sowohl in IE6 als auch in Mozilla (1.4 und Firebird 0.61) keinerlei Auffälligkeiten gibt.

Der letzte Bug, den ich kannte, war die Sache mit dem ungeschlossenen Submenü, wenn zwei direkt übereinander platziert waren.

Wenn man ein Menü das erste Mal öffnet, wird das DIV für das Menüfeld von Javascript in das Dokument geschrieben.

Es ist vorstellbar, dass bei dir der Sekundenbruchteil zwischen der Erstellung des DIVs und dem Setzen der CSS-Eigenschaft position:absolute als 'Hüpfen' der Seite erscheint, da es während diesem kurzen Augenblick ja Platz im Layout benötigt und eventuell andere Elemente verschiebt.

[miguelangel]

Hi Seb,
bin neu hier und auf der Suche nach einem knackigen Hier-Menu. Deine Lösung ist super. Vor allem auch dass der code so kompakt ist.
Habe eine ähnliche Navigation in DWMX versucht, mit Verhalten Popup-Menu. Aber das mm_menu.js hat über 700 Zeilen und bremst den Seitenaufbau.
Frage: Ist für Deine Lösung PHP unabdingbar? Ich arbeite hier mit ASP; oder genügt vielleicht schon html mit Javascript?
Oder weiss jemand, wie ich das FW/DW MX-Code-Monstrum kleiner kriege (muss nur auf IE5.x laufen) und die Layers so angepasse, dass die Submenues auf gleicher Höhe erscheinen und nicht um einige Pixel nach links und nach unten versetzt?
Wer hat eine Idee?