Simples DropDown-Menü und setTimeout

[t3rr0r]

Schönen guten Tag.

Ich habe ein Problem mit meinem kleinen Dropdown-Menü! Und zwar möchte ich, dass beim Mouseover des Hauptitems die unteren eingeblendet werden und beim Mouseout nach 0,5 Sekunden die Subitems wieder ausgeblendet werden. Soweit, so gut! Auf den ersten Blick funktioniert es: Wenn ich auf das Mainitem gehe, wird das Submenü angezeigt und 0,5 Sekunden nach dem Mouseout wieder ausgeblendet.
ABER:
Wenn ich mit der Maus runter auf die Subitems gehe, werden diese auch nach 0,5 ausgeblendet... Hier mal der Code:

  document.getElementById( 'NavMain' ).onmouseover = function() {
    document.getElementById( 'NavSub' ).style.display = 'block';
  }
  document.getElementById( 'NavSub' ).onmouseover = function() {
    document.getElementById( 'NavSub' ).style.display = 'block';
  }
  document.getElementById( 'NavSub' ).onmouseout = function() {
    window.setTimeout( function(  ) {document.getElementById( 'NavSub' ).style.display = 'none';}, 500);
  }
  document.getElementById( 'NavMain' ).onmouseout = function() {
    window.setTimeout( function(  ) {document.getElementById( 'NavSub' ).style.display = 'none';}, 500);
  }

Rein von der Logik her müsste die zweite Funktion ja dafür sorgen, dass die NavSub-Elemente beim Mouseover erstmal angezeigt werden. Aber sie werden trotzdem nach 0,5 Sekunden ausgeblendet, ob ich mit der Maus noch drüber bin...

Es handelt sich um ein wirklich einfaches Menü mit einem MainItem und ein paar SubItems darunter...

Kann mir da bitte jemand auf die Sprünge helfen? Ich blicks einfach nicht :-(( Hab auch schon ewig rumprobiert...

MfG und Danke

 

[Ortwin1st]

Ganz klar! Logikfehler.

Beim MouseOver Sub wird das Menü zum Zeitpunkt sichtbar gemacht, obwohl es schon sichtbar ist. Nach 0,5 Sekunden wird es wieder versteckt.

Benutze doch einfach clearTimout();

var id=0; // globale Variable

// Main.onMouseOut und Sub.onMouseOut
...
id=setTimeout("tuewas()",500);
...

// Sub.onMouseOver

clearTimeout(id);
...

 

[t3rr0r]

Erstmal vielen Dank für die schnelle Hilfe.
Nun muss ich gestehen, dass ich erst Anfänger in Sachen JavaScript bin...

Ich habe das mit der id eingefügt und auch das ClearTimeout eingebunden...
Leider funktioniert es immernoch nicht :-(
Ich denke mal, ich hab da was falsch eingefügt:

function enableDropDownIE(  ) {

var id=0;

  document.getElementById( 'NavMain' ).onmouseover = function() {
    document.getElementById( 'NavSub' ).style.display = 'block';
  }
  document.getElementById( 'NavSub' ).onmouseover = clearTimeout(id);

  document.getElementById( 'NavSub' ).onmouseout = function() {
    id = setTimeout( function() {document.getElementById( 'NavSub' ).style.display = 'none';}, 500);
    window.setTimeout( function() {document.getElementById( 'NavSub' ).style.display = 'none';}, 500);
  }
  document.getElementById( 'NavMain' ).onmouseout = function() {
    id = setTimeout( function() {document.getElementById( 'NavSub' ).style.display = 'none';}, 500);
    window.setTimeout( function() {document.getElementById( 'NavSub' ).style.display = 'none';}, 500);
  }
}

Kannst du mir bitte sagen, wie der Code letztendlich aussehen muss?

Vielen Dank!

 

[Ortwin1st]

Du hast die Variable id nicht global definiert. Sie muss vor deinen Funktionen stehen. Am Besten die erste Zeile in deinem Script.

Zudem würde schon alleine der Übersicht wegen deine Funktion (das was du in setTimeout() aufrufst) separat schreiben und diese dann aufrufen. Beispielsweise:

...
id = setTimeout("zeigeNav()",500);

...

function zeigeNav() 
{
    // Code, der Nav einblendet
    ...
}

Jeder hat mal klein angefangen. Aber deswegen möchte ich dir nicht den ganzen Code vorkauen. Ein bischen Eigeninitiative muss schon sein. ;-)

EDIT:
Mir ist gerade aufgefallen, du rufst die Funktion setTimeout() 2x auf. Das sollte natürlich nicht sein. Ob du die funktion mit window.setTimeout() aufrufst oder nur setTimeout() verwendest, ist egal. Du musst nur wissen, dass die Funktion als Rückgabewert eine id zurück gibt. Diese brauchst du, um das Timeout zu löschen.

 

[t3rr0r]

Da hast du ja auch Recht mit dem Vorkauen ;-)

Ich habe deine Tipps umgesetzt und eine Funktion hide() geschrieben, die für das
Ausblenden sorgt.

var id=0;

function hide()
{
  document.getElementById('NavSub').style.display = 'none'; 
}

function enableDropDownIE() {
  
  document.getElementById('NavMain').onmouseover = function() {
    document.getElementById('NavSub').style.display = 'block';
    clearTimeout(id);
  }

  document.getElementById('NavSub').onmouseover = clearTimeout(id);

  document.getElementById('NavMain').onmouseout = function(){
    id=setTimeout("hide()",500);
  }

  document.getElementById('NavSub').onmouseout = function(){
    id=setTimeout("hide()",500); 
  }
}

beim Mouseouver von NavMain musste ich auch ein clearTimeout setzen, weil er sonst auch das Main-Item nach 0,5 Sekunden ausblendet, wenn ich mit der Maus einmal drauf bin...
Und das Problem besteht weiterhin.. Nach unzähligem Variieren des Codes hab ich dann vermutet, dass es an den Lücken zwischen den Links lag, dass er die Liste trotzdem immer wieder ausgeblendet hat, weil ja zwischen der Schrift der Mauszeiger wieder "normal" wird. Also hab ich das Padding rausgenommen, damit alle Links direkt untereinander stehen. - Hat nix geholfen...

Ist ja auch klar, weil ja mit display:block nicht die Links selber, sondern die gesamte Liste angesprochen wird. Also muss es auch bei "Nicht-Link"-Flächen funktionieren.

Tut es aber leider noch nicht. Ich weiß langsam auch nicht mehr weiter. Bei der Funktion hide() scheint es egal zu sein, ob die oben oder unten steht, auch scheint die Reihenfolge der Ein- und Ausblendfunktionen egal zu sein, brachte jedenfalls keinen Unterschied.

Was mache ich noch falsch?

MfG

//EDIT:
Habs hinbekommen! Der Trick war, beim NavSub mouseout das clearTimeout zusätzlich auch mit hinzuschreiben...
Keine Ahnung warum, aber es geht jetzt
Vielen Dank nochmal für die Hilfe