nicht angemeldet
Hallo,
ich versuche seit mehreren Tagen ein eigenes DHTML-Menu aufzubauen. Die im Netz verwendeten Lösungen sind doch recht groß und vor allem unübersichtlich. Das sollte doch einfacher gehen...
Ein maßgebendes Problem an der Geschichte ist folgendes:
Ich fasse meine Menüstruktur in einem DIV-Block ein. Dieser ist zunächst leer. Per PHP lesen ich aus einer DB die Menüstruktur aus und bilde diese per Javascript in einem Array ab. Soweit so gut.
Das Menü wird dann, wenn die Seite geladen ist, nachträglich in den leere DIV-Block eingehängt. Die Folgemenüs werden entsprechend in den DIV-Block des entsprechenden Menüs eingehängt. Beim Anklicken (Eventhandler OnClick) läßt sich auch die erste Menüeben aus- und einklappen. Jede weitere Ebene macht Ärger. Die Ebene klappt zwar aus, wird aber sofort wieder eingeklappt, da der Eventhandler rekursiv zuschlägt (warum????).
Hier mal ein Bsp. wie es aussieht, wenn eine Menüebene ausgeklappt ist:
<div id=menu>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">File</div>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">Edit</div>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">View</div>
</div>
Damit ist das Hauptmenü im DIV-Block Menü eingehängt. Jedes DIV hat ein Attribut namens Status, welches festhält, ob das Menü geöffnet oder geschlossen ist.
Wenn sich nun das Untermenü "File" öffnet sieht das so aus:
<div id=menu>
<div style="font-weight:bold" onClick=buildmenu(this) status="open">File
<div style="font-weight:normal" onClick=buildmenu(this) status="close">Open</div>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">Save</div>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">Save as</div>
</div>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">Edit</div>
<div style="font-weight:normal" onClick=buildmenu(this) status="close">View</div>
</div>
Das macht das Script auch nur klappt dann auch wieder alles zusammen, da "buildmenu" rekursiv aufgerufen wird, obwohl das nicht passieren soll.
Im ersten aufruf erhalte ich das angeklickte Element, z.B. "SAVE". Die Funktion wird beendet und sofort - ohne zutun - wieder aufgerufen. Diesmal ist das Element "File" drin, usw...
Hier die dazugehörende Javascript-Funktion:
function buildmenu(item)
{ alert(item.innerHTML)
if (item.attributes.status.value == "close")
{ item.status = "open"
item.style.fontWeight = "bold"
var menuitems = ""
for (t=0;t<menu.length;t++)
{ if (menu[t]["Menuname"] == item.innerText)
{ var menuitems = menuitems + "<div onClick=buildmenu(this) status=close style='font-weight:normal;margin-left:15px'>"+menu[t]['Menuitem']+"</div>" }
}
item.insertAdjacentHTML("BeforeEnd", menuitems)
return false
}
if (item.attributes.status.value == "open")
{
item.status = "close"
item.style.fontWeight = "normal"
var z = item.childNodes.length - 1
for (t=0;t<z;t++)
{ var delitem = item.lastChild
item.removeChild(delitem)
}
return false
}
}
Warum zum Kuckuck stop das Teil nicht, wenn es einmal durch ist?
Vielen Dank im voraus für NÜTZLICHE!!! antworten.
Grüßle
michael