Mehrere Bereiche für Eventhandler

[Moritz]

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?

[Take]

Moin,

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?

Du möchtest für aufklappende Untermenüs nicht JavaScript verwenden, sondern sie <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=mit CSS lösen>.

Gruß,
Take

[Moritz]

Dankeschön, ich wusste bis jetzt noch nicht, dass der ":hover"-Selektor für alle Tags gilt. Man lernt immer wieder was dazu.
Ganz ohne Javascript geht es bei mir soweit ich das beurteilen kann nicht, da die Untermenüs eine Position brauchen die auf der Text-Breite und Untermenü-Höhe basiert.

Moin,

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?

Du möchtest für aufklappende Untermenüs nicht JavaScript verwenden, sondern sie <http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=mit CSS lösen>.

Gruß,
Take

[dave]

Hi,

<ul>
  <li onmouseover="menuMouseOver('mi1');" onmouseout="menuMouseLeave('mi1');" id=mi1><a href="#">Blog</a></li>
   <ul class=submenu id=submi1>[...]

Ein ul darf nur li als direkte kinder haben. Kein ul.

<ul class=submenu class=subsubmi1mi1>

Es ist invalide zweimal das Gleiche Attribut anzugeben.

<li onmouseover="subSubMenuMouseOver('subsubmi1mi1mi1');" onmouseout="subSubMenuMouseLeave('subsubmi1mi1mi1');" id=subsubmi1mi1mi1><a href="">

Schließende Tags fehlen.

<li onmouseover="subMenuMouseOver('submi1mi1');" onmouseout="subMenuMouseLeave('submi1mi1');" id=submi1mi1>

Diese ID wurde bereits vergeben. IDs müssen dokumentweit eindeutig sein.

Du solltest deinen Code validieren.

Warum benutzt du für dein Menü Javascript und nicht ausschließlich CSS?

~dave

[Moritz]

Der Quelltext wurde so nur kurz angepasst und ist nicht wirklich so, dabei sind mir wohl kleine Fehler unterlaufen.

• Das </li> ist mir verrutscht, <ul> ist tatsächlich ein Kind von <li> und nocht von <ul>.
• Die class-Attribute habe ich übersehen...
• ...und wo die schließenden Tags fehlen habe ich mich wohl vercopyundpastet :D.
  Der Quelltext sollte nur mal dazu da sein mein Anliegen verstehen zu können, da sind mir auf die Schnelle wohl ein paar Fehler reingerutscht.