11.4 Erweiterung der Navigation 

Die Navigation funktioniert ja schon ganz gut, aber ganz zufrieden sind wir noch nicht. Zum einen soll die Navigation auch auf Unterseiten verwendet werden; der Link der betreffenden Unterseite auf sich selbst sollte dann natürlich inaktiv sein. Aber ein kleiner Effekt soll zusätzlich noch eingebaut werden: Fährt der Benutzer mit der Maus über einen Menüpunkt, so soll dieser fett dargestellt werden. Der Menüpunkt, der die gerade aktive Seite bezeichnet, soll von vornherein fett sein.

11.4.1 Vorbereitungen 

Was muss geändert werden, damit das so funktioniert?

Die Funktion menue_in() muss dahingehend geändert werden, dass der aktive Menüpunkt in fetter Schrift dargestellt wird. Ist der aktive Menüpunkt gleichzeitig der geladene Menüpunkt, so muss keine Aktion erfolgen (wir wollen ja effizient programmieren).

Die Funktion menue_out() muss dahingehend geändert werden, dass der zuvor aktive Menüpunkt wieder normal dargestellt wird – außer natürlich, es handelt sich um den aktiven Menüpunkt; der muss fett bleiben.

Die Funktion klapp_auf() muss dahingehend geändert werden, dass der geladene Menüpunkt auch fett dargestellt wird.

Die Funktion click() muss dahingehend geändert werden, dass beim Klicken auf den gerade aktiven Menüpunkt nichts passiert.

Auch hierzu sind ein paar Vorbereitungen notwendig. Da die Menüpunkte Grafiken sind, handelt es sich bei den in fetter Schrift dargestellten Menüpunkten ebenfalls um Grafiken. Diese haben folgende Namenskonvention: Der fette Menüpunkt in Kategorie Nummer X und (innerhalb dieser Kategorie) Nummer Y hat den Grafiknamen menu_X_Y_f.gif (f steht für fett).

Schließlich werden zwei weitere globale Variablen eingeführt, die dann auch von anderen Leuten geändert werden können: die Nummer der Kategorie und die Nummer des Menüpunkts, der gerade geladen ist. Auf jeder Unterseite können und müssen diese Nummern individuell angepasst werden. Es ist aber einfacher, zwei Zahlenwerte zu ändern als irgendwelche Parameter innerhalb der JavaScript-Funktionen. Folgendermaßen würde es aussehen, wenn der zweite Menüpunkt der ersten Kategorie geladen ist:

var kategorie = 1;
var menuepunkt = 2;

11.4.2 Leichte Änderungen 

Der letzte Punkt unserer To-do-Liste – der inaktive Link – ist auch gleichzeitig der einfachste. Es wird einfach überprüft, ob der entsprechende Menüpunkt angeklickt worden ist, und falls ja, passiert eben nichts.

function click(X, Y) {
   if (X == ausgeklappt &&
      (X != kategorie || Y != menuepunkt)) {
      location.href = (urls[X-1])[Y-1];
   }
}

Beim Ausklappen ist auch eine Kleinigkeit zu beachten: Beim geladenen Menüpunkt muss die fette Variante der Grafik angezeigt werden. Das war dann aber auch schon alles, worüber man stolpern könnte. Unter der lokalen Variablen suffix wird gespeichert, was an den Grafiknamen angehängt werden muss. Das ist "_f", wenn es sich um den geladenen Menüpunkt handelt, ansonsten nichts.

function klapp_auf(X) {
   clearTimeout(ID);
   if (ausgeklappt != 0 && ausgeklappt != X) {
      klapp_zu(ausgeklappt);
   }
   ausgeklappt = X;  //erst jetzt, nach dem Zuklappen, setzen!
   for (var i=1; i<=urls[X-1].length; i++) {
      suffix = (X == kategorie && i == menuepunkt) ? "_f" : "";
      eval("document.menu_" + X + "_" + i + ".src
      = 'menu_" + X + "_" + i + suffix + ".gif'");
   }
}

11.4.3 Doppeltes Mouseover 

Die Funktion menue_in() wird folgendermaßen geändert: Ist der aktive Menüpunkt gleichzeitig der geladene Menüpunkt, findet kein Mouseover statt; ansonsten wird die fette Variante des aktiven Menüpunkts dargestellt.

function menue_in(X, Y) {
   clearTimeout(ID);
   if (X != ausgeklappt) {
      klapp_zu(X);
   } else {
      if (X != kategorie || Y != menuepunkt) {
         eval("document.menu_" + X + "_" + Y + ".src
         = 'menu_" + X + "_" + Y + "_f.gif'");
      }
   }
}

In der Funktion menue_out() wird statt der fetten nun die normale Variante des Menüpunkts angezeigt, außer es handelt sich um den geladenen Menüpunkt.

function menue_out(X, Y) {
   if (X != kategorie || Y != menuepunkt) {
      eval("document.menu_" + X + "_" + Y + ".src
      = 'menu_" + X + "_" + Y + ".gif'");
   }
   eval("ID = setTimeout('klapp_zu(" + X + ")', 50)");
}

Hier klicken, um das Bild zu Vergrößern

Abbildung 11.4     Die erweiterte Version: Der aktuelle Menüpunkt wird fett dargestellt.

11.4.4 Das komplette Beispiel im Überblick 

Auf der Buch-DVD finden Sie die gesamte Datei im Überblick, einschließlich des Beispiel-HTML-Codes. So können Sie sich einiges an Tipparbeit sparen.