Moritz: Mehrere Bereiche für Eventhandler

Beitrag lesen

SELF-Forum

Mehrere Bereiche für Eventhandler

Moritz
– Informationen zu den Bewertungsregeln

Hallo Selfhtml-Gemeinde,

ich möchte gerne eine Navigation mit Untermenüs für meine Homepage machen.

Das ganze soll im Endeffekt so aussehen (Weiterverarbeitung des bestehenden Menüs): http://www.bilderload.com/archiv.html?bild=132161&bild_name=menuJVAEE.png
Also wenn man auf "Blog" zeigt öffnet sich das eine Untermenü und wenn man auf "Eintrag 1" zeigt öffnet sich noch ein Untermenü.

Im Augenblick habe ich folgenden Code:

<div id=navigation>  
 <ul>  
  <li onmouseover="menuMouseOver('mi1');" onmouseout="menuMouseLeave('mi1');" id=mi1><a href="#">Blog</a></li>  
   <ul class=submenu id=submi1>  
    <li onmouseover="subMenuMouseOver('submi1mi1');" onmouseout="subMenuMouseLeave('submi1mi1');" id=submi1mi1><a href="#">Eintrag 1</a>  
     <ul class=submenu class=subsubmi1mi1>  
      <li onmouseover="subSubMenuMouseOver('subsubmi1mi1mi1');" onmouseout="subSubMenuMouseLeave('subsubmi1mi1mi1');" id=subsubmi1mi1mi1><a href="">  
     </ul>  
    </li>  
    <li onmouseover="subMenuMouseOver('submi1mi1');" onmouseout="subMenuMouseLeave('submi1mi1');" id=submi1mi1><a href="#">Eintrag 2</a></li>  
    <li onmouseover="subMenuMouseOver('submi1mi2');" onmouseout="subMenuMouseLeave('submi1mi2');" id=submi1mi2><a href="#">...</a></li>  
   </ul>  
  </li>  
 </ul>  
</div>

function getPosition(obj) {  
 var pos = { x:0, y:0 };  
 do {  
  pos.x += obj.offsetLeft;  
  pos.y += obj.offsetTop;  
 } while (obj = obj.offsetParent);  
 return pos;  
}  
function hasSubMenu (id) {  
 if(document.getElementById("sub" + id) != null) {  
  return true;  
 } else {  
  return false;  
 }  
}  
function menuMouseOver (id) {  
 document.getElementById(id).style.background = "#eeeeee";  
 if (hasSubMenu(id)) {  
  var submenu = document.getElementById("sub" + id);  
  submenu.style.left = getPosition(document.getElementById(id)).x - (submenu.offsetWidth - document.getElementById(id).offsetWidth) + "px";  
  submenu.style.top = getPosition(document.getElementById(id)).y + document.getElementById(id).offsetHeight - 2 + "px";  
  submenu.style.visibility = "visible";  
 }  
}  
function menuMouseLeave (id) {  
 document.getElementById(id).style.background = "white";  
 if (hasSubMenu(id)) {  
  var submenu = document.getElementById("sub" + id);  
  submenu.style.visibility = "hidden";  
 }  
}

Und (sub)subMenuMouseOver(/Leave) sind genauso mit anderen Angaben zur Positionsberechnung.

Mein Problem jetzt:
Wenn man auf "Blog zeigt erscheint das Untermenü, wenn man auf "Eintrag 1" zeigt, verschwindet es oft (nicht immer?!) wieder. Liegt das an der absoluten Position oder an irgendwas anderem? Wie kann ich das lösen?

Beitrag melden
–
Informationen zu den Bewertungsregeln