Menu Hover:effekt

[Webgau]

Servus,

ich möchte eine ganz simple horNavigation erstellen. Hierbei habe ich auf die Grundlagen von SelfHTML zurückgegriffen. Die Navigation soll sich mittels JavaScript öffnen wenn ich mit der Maus drüber fahre.

Mein Problem ist das bei dem Beispiel im JavaScript auf die ID´s nach einer liste gebaut wird (ul#navigation) ich habe meine Navigation allerdings so ausgelegt: "#navigation ul", also erst ID dann liste. Das Funktioniert allerdings mit dem standart script nicht.

Was muss ich nun ändern damit es läuft? Hier mal das Standart JavaScript:

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("topMenu_in").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

und so sieht die Nav aus:

<div id="topMenu_in">
<ul class="menu">
<li id="current" class="active item1"><a href=""><span>Startseite</span></a></li>
<li class="parent item41"><a href=""><span>FAQ</span></a></li>
</ul></div>

hoffe ich konnte es halbwegs verständlich ausdrücken

Greetz mirko

 

[SpiceLab]

Mein Problem ist das bei dem Beispiel im JavaScript auf die ID´s nach einer liste gebaut wird (ul#navigation) ich habe meine Navigation allerdings so ausgelegt: "#navigation ul", also erst ID dann liste. Das Funktioniert allerdings mit dem standart script nicht.

Falsch. Dein <ul> besitzt nicht diesen ID-Bezeichner, sondern den Klassenbezeichner "menu", und im Script benennst du den ID-Bezeichner des umschliessenden <div>, obwohl dort die ID des <ul> zu benennen ist.

Übrigens ist dieses JS ausschließlich dem IE5.x und IE6 gewidmet, die die Pseudoklasse :hover nicht für das <li> interpretieren, also den Selektor li:hover ul, mit dem die Untermenüebenen gezeigt werden.

Alle übrigen Browser benötigen den JS-Code nicht.

Was muss ich nun ändern damit es läuft?

    var LI = document.getElementById("topMenu_in").firstChild;

Dem <ul> einen ID-Bezeichner zuweisen, und ihn in dieser Zeile benennen.