Pulldown-Menü Deluxe (JS/DOM)

[seb]

Mit PHP hat das Menü nix zu tun. Das ist reines Javascript, du kannst es auf jeder HTML-Seite einbinden, wie beschrieben.

[miguelangel]

Hallo Seb,
OK, alles klar. Wie kann ich den Code anpassen, damit ich das Menü als vertikale Navigation auf der linken Seite einbauen kann? - Was muss ich ändern?

[seb]

Am Code des Menü-Scripts garnichts.

Werf mal nen Blick ins HTML der Demo-Seite, dort siehst du, wie das Menü per JS-Link oder event-Handler (onmouseover etc.) geöffnet wird.

Du baust einfach deine vertikale Navigation mit den Links für die Hauptmenüpunkte und lässt diese das entsprechende Menü öffnen. 'this.offsetTop' und 'this.offsetLeft' im Beispiel sind dabei die Koordinaten des Links selbst.

[miguelangel]

Prima, hab ich schon gemacht. Ist echt klasse, dein Menü. Hatte zuvor die Sache mit mm_menu.js von DWMX aufgezogen; das js hat fast 800 Zeilen Code!
Da wurde bei den Usern Unmut laut, wg. Ladezeit.
- Lass dich doch anheuern von MM!
Was mir aufgefallen ist: Manchmal bleibt der Layer eingeblendet, obwohl ich mit der Maus schon irgendwo ganz anders auf der Seite bin. Hab mal die Einblendezeit reduziert; aber das hilft nicht wirklich (MSIE 5.5.). Außerdem: bei target - Angaben muss man auch etwas rumprobieren ('top' geht, nicht aber '_top'; '_blank' geht; nicht aber 'blank')...
Danke + Gruß, miguelangel

[seb]

Hatte zuvor die Sache mit mm_menu.js von DWMX aufgezogen; das js hat fast 800 Zeilen Code!

Das kommt halt dabei raus, wenn eine Maschine heutzutage versucht, sich selbst zu programmieren.

Es wird noch ne Weile dauern, bis sie das genausogut oder besser können werden als Menschen...probiers dann nochmal mit Dreamweaver 2020 .

Manchmal bleibt der Layer eingeblendet, obwohl ich mit der Maus schon irgendwo ganz anders auf der Seite bin.

Ich weiß - der 'Auto-Close-Mechanismus' wird manchmal nicht ausgelöst oder lahmgelegt. Ich weiß nicht genau, woran das liegt, aber ich denk es ist vernachlässigbar.

Also Target-Namen sollten eigentlich alle gültigen Framenamen + '_blank' (kein Framename, als Ausnahme dazugecodet) funktionieren.

[joewest]

probier auch grad mal den script aus, und hab nun eine denkblokade:

es muß das möglich sein in einem frameset

(<!-- frames -->
<frameset rows="140,*,120" noresize frameborder="0" framespacing="0">
<frame name="menu" src="menu.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
<frame name="mitte" src="mitte.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" noresize>
<frame name="start" src="start.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize>
</frameset>)


in dem das menu in menu.html erscheinen soll, aber die "aufklappmenus" in mitte.html angezeigt werden.

bei dem aufruf der menüpunkte (z.B pdm_main_kasse.add_item('urls/kasse.html', 'Verkauf', 'web_file.gif', 'parent.mitte') gebe ich ja nur den target des links an.

dachte das ich bei dem aufruf (z.B <a href="#" onmouseover="pdm_main_kasse.show(this.offsetLeft, this.offsetTop + 19);">Kasse</a> |) ein target mit angebe.

irgendwie bekomme ich das aber nicht hin.

wer kann mir da ein wenig auf die sprünge helfen?

[seb]

Menü-Anzeige-Link und Menü selbst in verschiedenen Frames hab ich noch nicht ausprobiert, aber es müsste eigentlich funktionieren.

Sämtliches Javascript für das Menü (Code einbinden, Menüobjekte instanzieren) gehört dann natürlich in den Frame, in dem die Menüs erscheinen sollen.

Die Links im anderen Frame rufen die Menüs dann über parent.framename.menuname.show(x,y) auf.

Für die Koordination kannst Du dann natürlich nicht die Position des Öffnen-Links verwenden (this.offsetTop etc.), da die im anderen Frame eine andere Stelle bedeuten. Musst halt mit absoluten Zahlenangaben rumprobiern, bis es passt.

[joewest]

super, danke hat geklappt. unter ie nimmt er sogar die postitionen so richtig.

[seb]

Neues Release - jetzt noch kompakter!

Ich hab den Programmcode des Menüs nochmals rationalisiert.
Bei der neuen Version werden keine CSS-Eigenschaften mehr per JS durch das Script definiert - abgesehen von den absolut betriebsnotwendigen.

Dies bedeutet eine Vereinfachung des Scripts um einige Zeilen sowie die Möglichkeit, das Design der Menüs direkt per CSS und ohne eine einzige Zeile Javascript anzupassen.

Auserdem wurde ein weiterer kleiner Fehler behoben, der - ebenso wie der letzte bekannte Bug davor - in bestimmten Situationen dazu geführt hatte, dass ein Menü bei Verlassen des Panels mit dem Mauszeiger nicht mehr geschlossen wurde.

Die neue Version findet ihr sowohl im Anhang dieses Beitrags als auch im ersten Beitrag des Threads.

Anbei noch ein Beispiel zur CSS-Formatierung des Menüs:

div.pdm_panel
{
    background-color:#fff;
    border:1px solid #888;
    cursor:default;
    font:11px verdana;
    -moz-opacity:0.9;
}

div.pdm_panel td.pdm_col_caption
{
    padding:3px;
}

tr.pdm_item
{
    background-color:transparent;
    color:#000;
}

tr.pdm_item_hover
{
    background-color:#058;
    color:#fff;
}


div.pdm_panel td.pdm_col_icon
{
    display:none;
}

#menu1
{
    background-color:#4be;
}

#menu2
{
    background-color:#6b6;
}


#menu2 tr.pdm_item_hover
{
    background-color:#272;
} 

[holunda]

Bin mir nicht sicher ob Bug oder unvermeidbar:

Wenn das Menü auklappt und es überlappt eine select box dann wir verschwindet das Menü hinter der combo box.

Kann man dagegen was tun oder ist das eine div Eigenart?

[seb]

Keine DIV-, wohl aber eine Internet Explorer-Eigenart - Mozilla und Opera haben dieses Problem nicht.

Der Grund liegt darin, dass der Internet Explorer für die Darstellung seiner Formularelemente auf die Windows-API zurückgreift, die diese Elemente (Buttons, Listboxen, Textfelder etc.) schon fix und fertig bereitstellt (genau wie die allermeisten anderen Windows-Anwendungen auch).

Diese API zeichnet die Formularelemente allerdings standardmäßig über die HTML-Zeichenfläche, ohne Berücksichtigung des z-Index in HTML/CSS.

Das gilt nicht mehr für alle Formularelemente - mit Buttons und Texteingabefeldern gibt's keine Probleme mehr, der Rest ist daher wohl schlicht auf Faulheit der IE-Programmierer zurückzuführen .

Das ist übrigens auch der Grund dafür, warum man manche Formularelemente immer noch nicht beliebig per CSS stylen kann - der Browser hat keine Möglichkeit, über die Windows-API das Aussehen der Formularelemente zu verändern.

Die anderen Browser wie Mozilla und Opera bringen ihre Formularelemente selbst. Sie sind direkt im Browser einprogrammiert, unter Berücksichtigung der besonderen Anforderungen von HTML und CSS. Dadurch gibts dort keine Überlappungsprobleme und man kann auch Radiobuttons und Check- und Listboxen per CSS anpassen.

[holunda]

dacht ichs mir doch dass es irgendwas mit der Faulheit der IE'ler zu tun hat

noch ein Bug? (Dirty darstellung der items im Moz 1.4.)

alex

[seb]

Ein Bug in Mozilla. Das kommt durch die Transparenz (CSS -moz-opacity), wenn du die abschaltest, ist es weg.

[Emily537]

Hallo seb,

finde Dein Menü super, habe es gleich testen müssen, und bin begeistert - habe nur ein Problem, wie gebe ich an, das ein Link in einem neuen Fenster geöffnet werden soll?

Emily


Es hat sich erledigt, habe false vergessen...

[arovo]

Hallo seb,

habe dein menü in eine frame Seite eingebaut, aber habe noch ein problem beim scrollen.

wenn ich als anzeigepunkt document.body.scrollTop eingebe,
funktioniert das ganze ganz gut, bis darauf, dass die menüs mitgescrollt werden.

<a href="index.htm" target="_top" onmouseover="parent.main.pdm_main_angebote.show(this.offsetLeft, document.body.scrollTop -1);"><font color="#ffffff">Angebote</a> |

der Hauptframe heißt main.
die navigation ist im frame nav.

wenn ich nun versuche den scroll-zustand von main.document.body.scrollTop abzufragen, bekomme ich immer einen Fehler und keine ANzeige.

<a href="index.htm" target="_top" onmouseover="parent.main.pdm_main_angebote.show(this.offsetLeft, main.document.body.scrollTop -1);"><font color="#ffffff">Angebote</a> |

wo habe ich hier den denkfehler Fehler?

Danke!