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

globale Werte

Wir haben nun ein Skript gemacht, welches alle Untermenüs ausblendet. Im Folgenden werden wir weitere Skripts brauchen, zum Beispiel eines, das sich darum kümmert, gewisse Äste unseres Menübaums auszuklappen und eines, das sie wieder zuklappt.

Das bringt ein neues Problem mit sich: Diese Skripts - egal wie viele es zuletzt sein werden - müssen gewisse Informationen untereinander austauschen können. Es muss zum Beispiel jedes von ihnen "wissen", dass unser Menübaum meinmenu heisst. Und sie müssen die Information verfügbar haben, was wann sichtbar oder unsichtbar ist.

Zu dem Zweck gibt es in JavaScript Variable, die nicht nur in einer Funktion drin bekannt sind, sondern in allen Funktionen, und die auch ausserhalb einer Funktion existieren. Auf diese Einrichtung greifen wir nun zurück. Unsere nächste Weiterentwicklung wird also nicht zu sichtbaren Resultaten führen, sondern den Boden dafür vorbereiten, dass wir weitere, neue Funktionen einführen können.

• Wir taufen daher unsere Funktion klappmenu um und geben ihr den Namen zuklappen.
• Wir legen ein paar solche allgemein verwendbare Variablen an
• Und wir erstellen eine neue Funktion klappmenu, die diese Variablen mit Werten belegt und danach zuklappen aufruft.

var das_menu ;
var die_class ;

function klappmenu(mname,gname) {
  das_menu = mname ;
  die_class = gname ;
  zuklappen() ;
}

function zuklappen() {

  ganzesmenu = document.getElementById(das_menu) ;  // auf das Menü zielen
  for(i=0 ; i<ganzesmenu.childNodes.length ; i++) {
    dieseskind = ganzesmenu.childNodes[i] ;
    if(dieseskind.className) {
      if(dieseskind.className.substr(0,die_class.length) == die_class) {
        if(dieseskind.className.substr(die_class.length,1) > "1") {
          dieseskind.style.display = "none" ;
        }
      }
    }
  }
}

Die Funktion zuklappen ist weitgehend die selbe geblieben, aber die Namen des Menüs und der Class müssen nicht mehr beim Aufruf in Klammern angegeben werden, sondern die hat die Funktion nun in den Variablen das_menu und die_class zur Verfügung.

Die Funktion klappmenu deponiert diese Werte in den beiden Variablen, die ganz zu Beginn, noch vor den Funktions-Definitionen angelegt werden.

Wenn du etwas genauer sehen willst, wie's abläuft, kannst du in der Funktion klappmenu statt zuklappen() den Befehl window.setTimeout("zuklappen()",1000) notieren, dann geht's nach dem Laden der Seite eine Sekunde, bevor das Menü eingeklappt wird.

und so läuft's nun.

Damit sind wir bereit, wieder weiter zu bauen.