Hallo Forum,
ich möchte für meine Webseite ein Layermenü programmieren. Das Anzeigen und Öffnen des Menüs klappt auch soweit ganz gut. Doch wenn ich über mein geöffnetes Layermenü drüber fahre, wird sofort das onmousehover Event und gleich danach das onmouseout Event gefeuert. Hier mal der HTML & der JS Code dazu:
HTML:
HTML-Code:
<div id="header_menu">
<ul class="level1">
<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this)" href="index.php?id=9">Home</a></li>
<li class="act"><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this, 'submenu_8')" href="index.php?id=8">Wohnungen</a>
<div onmouseout="onSubmenuContainer_out();" onmouseover="onSubMenuContainer_over();">
<ul style="display: none;" id="submenu_8" class="level2">
<li><a href="index.php?id=20">Mein Merkzettel</a></li>
<li><a href="index.php?id=21">Suche</a></li>
</ul>
</div>
</li>
<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this, 'submenu_7')" href="index.php?id=7"/>
<div onmouseout="onSubmenuContainer_out();" onmouseover="onSubMenuContainer_over();">
<ul style="display: none;" id="submenu_7" class="level2">
<li><a href="index.php?id=32"/></li>
<li><a href="index.php?id=31">Test</a></li>
<li><a href="index.php?id=30">bla</a></li>
</ul>
</div>
</li>
<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this, 'submenu_6')" href="index.php?id=6">Service</a>
<div onmouseout="onSubmenuContainer_out();" onmouseover="onSubMenuContainer_over();">
<ul style="display: none;" id="submenu_6" class="level2">
<li><a href="index.php?id=29">Testseite 1</a></li>
<li><a href="index.php?id=28">Testseite 2</a></li>
<li><a href="index.php?id=27">Testseite 3</a></li>
</ul>
</div>
</li>
<li><a onmouseout="onHeaderMenuItem_out(this)" onmouseover="onHeaderMenuItem_hover(this)" href="index.php?id=5">Gut zu Wissen</a></li>
</ul>
</div>
Dazu noch den JS Code:
Code:
var currentFoldOutMenu;
var cursorInSubmenuContainer = false;
var checkCursorStateTimer;
var outCount = 0;
function onHeaderMenuItem_hover(item, submenuContainer) {
clearTimeout(checkCursorStateTimer);
if (item != null) {
if (item.parentNode.nodeName == "LI" && item.parentNode.className != "act") {
item.parentNode.style.backgroundPosition = "left 0px";
}
}
if (currentFoldOutMenu != null) {
currentFoldOutMenu.style.display = "none";
currentFoldOutMenu = null;
}
if (submenuContainer != null) {
var submenuContainerObj = document.getElementById(submenuContainer);
if (submenuContainerObj != null &&
submenuContainerObj.style.display == "none") {
submenuContainerObj.style.display = "block";
currentFoldOutMenu = submenuContainerObj;
}
}
}
function onHeaderMenuItem_out(item) {
if (item != null) {
if (item.parentNode.nodeName == "LI" && item.parentNode.className != "act" ) {
item.parentNode.style.backgroundPosition = "left 53px";
}
}
if (currentFoldOutMenu != null) {
checkCursorStateTimer = setTimeout(checkFoldOutState, 250);
}
}
function onSubMenuContainer_over() {
cursorInSubmenuContainer = true;
// Testmode
var checker = document.getElementById("checkField");
outCount ++;
if (checker != null)
checker.innerHTML = outCount;
}
function onSubmenuContainer_out() {
if (currentFoldOutMenu != null) {
currentFoldOutMenu.style.display = "none";
currentFoldOutMenu = null;
cursorInSubmenuContainer = false;
}
}
function checkFoldOutState() {
if ((!cursorInSubmenuContainer) && (currentFoldOutMenu != null)) {
currentFoldOutMenu.style.display = "none";
currentFoldOutMenu = null;
}
}
Wie kann ich sagen, dass das mouseout Event des Submenü Containers erst gefeuert wird, wenn der entsprechende DIV Container auch wirklich verlassen wird und schon wenn ich über ein enthaltenes Objekt fahre?
Danke schon mal für eure Hilfe
Grüß d-snake