Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Vorhang auf! Klappe zu! Übersicht die HTML-Seite die Hyperlinks das Stylesheet Block-Elemente Gestaltung einrücken Script, Script, Hurrah einrichten zielen Schutt verschwindibus globale Werte Ereignisse wo bin ich? endlich ausklappen Moment noch! das ist die Höhe polieren Abschluss

---

Service

Kontakt & Feedback

CSS Anwendung

Klappe zu!

Script, Script, Hurrah

Moment noch!

Ein wenig was klappt schon aus.

Aber vermutlich geht's dir wie mir: Untermenüs lassen sich nicht weiter ausklappen, weil man dazu mit der Maus die Menüzeile verlassen muss, und dann klappt das Untermenü in Windeseile zu, bevor man eine seiner Zeilen ansteuern kann. Was wir also bräuchten, wäre eine Verzögerung. Die bauen wir wie folgt ein:

• Wir ändern den Event-Handler, den wir in der Funktion zuklappen installieren, von zuklappen auf einklappen:

          if(erstmals) {
            dieseskind.onmouseover = aufklappen ;
            dieseskind.onmouseout  = einklappen ;

• Wir definieren eine neue Funktion:

  function einklappen() {
    window.setTimeout("zuklappen()",1000) ;
  }

Damit haben wir eine Verzögerung von einer Sekunde eingebaut. Das wirkt sich schon aus.

Aber aufgeschoben ist bekanntlich nicht aufgehoben, und nach einer Sekunde klappt dann eben doch alles zu, ob's uns nun passt oder nicht. Wir werden der Sache nur Herr, wenn wir unseren Zuklapp-Auftrag, den wir mit window.setTimeout platziert haben, widerrufen. Das tun wir folgendermassen:

• Wir legen ausserhalb der Funktionen zwei neue Variablen an:

  var offpend  = false ;       // ist ein Ausblenden pendent?
  var pendent  = null ;        // Auftragsnummer des Ausblendens

• Wir erweitern die Funktion einklappen in zweierlei Hinsicht: Wenn wir den Auftrag zum zuklappen platzieren, notieren wir die Auftragsnummer in der Variablen pendent und merken uns in der Variablen offpend, dass ein Auftrag pendent ist. Und falls schon einer pendent ist, wenn die Funktion aufgerufen wird, wird er annulliert. Das sieht dann so aus:

  function einklappen() {
    if(offpend == true) {                               // ist schon ein Auftrag pendent?
      window.clearTimeout(pendent) ;                    // ja, den löschen wir.
    }
    pendent = window.setTimeout("zuklappen()",500) ;    // in einer halben Sekunde löschen
    offpend = true ;                                    // Auftrag ist pendent!
  }
  

  Wie du siehst, gibt window.setTimeout eine Art Auftragsnummer zurück, und window.clearTimeout kann dazu verwendet werden, einen Auftrag zu annullieren.

Bleibt noch eins: Wir müssen den Zuklapp-Auftrag auch und vor allem widerrufen, wenn wir einen neuen Menüast aufklappen wollen. Die drei Zeilen

  if(offpend == true) {                               // ist ein Auftrag pendent?
    window.clearTimeout(pendent) ;                    // ja, den löschen wir.
  }

fügen wir daher auch am Anfang der Funktion aufklappen ein.

Nun klappt's wie erwartet.