Wir werden in alle Richtungen expandieren. – Wim Wenders

Kapitel 31 Navigation

Was ist Navigation (auf einer Website)? Nun, es mag hierzu mehrere Definitionen geben, aber die Grundidee ist immer dieselbe: Dem Benutzer wird die Möglichkeit gegeben, die verschiedenen Bereiche einer Website zu erreichen. Im World Wide Web gibt es genügend Beispiele für gute und schlechte Navigation, doch das soll nicht das Thema dieses Buches sein. In diesem Kapitel geht es darum, Möglichkeiten für Navigation aufzuzeigen – natürlich mit unserer Lieblingsskriptsprache, JavaScript.

Die profane Variante – Navigation über pure Links – lassen wir dabei außer Acht. Wir sehen uns stattdessen an, was JavaScript sonst noch so an Mitteln bietet.

Eine Hauptanforderung an ein Navigationskonzept besteht darin, möglichst viele Informationen auf möglichst wenig Raum unterzubringen. Aus diesem Grund ist von den meisten Informationen auf den ersten Blick nichts zu sehen, sondern erst auf den zweiten.

Wir werden in diesem Kapitel zwei verschiedene Konzepte vorstellen:

Navigation mit Pulldown-Menüs (eine einfache und eine komplexe Variante)

Navigation mit DHTML (wie im Windows Explorer – nun ja, fast)

Bei allen Umsetzungen sind anfangs nur die Oberbegriffe der einzelnen Navigationspunkte zu sehen. Die Unterbegriffe offenbaren sich erst nach einem Klick (oder einer Mausbewegung).

31.1 Navigation mit Pulldown-Menüs 

Auf vielen Websites befinden sich ein so genanntes Schnellstartmenü oder Quicklinks. Diese Begriffe sind keineswegs offiziell, nur hat ein findiger Texter diese erfunden und einige andere haben sie übernommen. Gemeint ist, dass in einem Schnellstartmenü mehrere Seiten des aktuellen Angebots aufgelistet sind. Sobald der Benutzer einen der Einträge selektiert, wird die angegebene Seite geladen.

Dieser Effekt ist sehr leicht umzusetzen, wenn Sie die einzelnen Elemente korrekt zusammenstellen:

Um eine neue Seite in ein neues Fenster zu laden, müssen Sie die Eigenschaft location.href des entsprechenden Fensters oder Frames setzen.

Aus praktischen Gründen sollten Sie die zu ladende URL im value-Attribut des entsprechenden Eintrags ablegen:

<option value="http://www.opera.com/">Opera</option>

Die Funktion, die das Laden der neuen Seite auslöst, wird über den onchange-Event-Handler aufgerufen. Dieser wird genau dann aktiv, wenn ein anderer Eintrag im Pulldown-Menü aufgerufen wird.

<select name="Auswahl"
   onchange="navigation_laden(this);">

Alternativ dazu ist es auch möglich, zum Laden der neuen URL eine zusätzliche Schaltfläche anzubieten. Wenn diese angeklickt wird, wird die neue URL geladen:

<input type="button" value="Go!"
   onclick="navigation_laden(this.form.elements['Auswahl']);" />

Um eine Leseranfrage zu einer der Vorauflagen zu beantworten: Die URL muss natürlich nicht im aktuellen Fenster geöffnet werden, das kann auch in einem anderen Fenster oder Frame geschehen.

Aus diesem Grund wird die Funktion navigation_laden() folgendermaßen konzipiert:

Der erste Parameter ist die Referenz auf die Auswahlliste.

Der zweite, optionale Parameter ist eine Referenz auf das Fenster oder den Frame, in dem die URL geöffnet werden soll.

Der restliche Ablauf der Funktion navigation_laden() ist klar: Aus der Auswahlliste wird das selektierte Element bestimmt und dessen value-Eigenschaft ausgelesen. In den folgenden Fällen wird davon Abstand genommen, eine neue URL zu laden:

wenn das value-Attribut leer ist

wenn das value-Attribut aus einem Doppelkreuz besteht

Der Grund hierfür ist klar: Es gibt in der Auswahlliste unter Umständen Einträge, die nicht »verlinkt« werden sollen, beispielsweise leere Einträge (zur optischen Abgrenzung der restlichen Einträge) oder Einträge in der Richtung »---Bitte auswählen---«.

Hier sehen Sie die gewünschte Funktion (in der Datei navigation.js):

function navigation_laden(auswahl) {
   var arg = navigation_laden.arguments;
   var v = auswahl.options[auswahl.selectedIndex].value;
   if (arg.length > 1) {
      var w = arg[1];
   } else {
      var w = self;
   }
   if (v != "" && v != "#") {
      w.location.href = v;
   }
}

Im folgenden Listing finden Sie diese Funktionalität in einer HTML-Seite integriert:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="Auswahl"
   onchange="navigation_laden(this, self);">
<option value="http://www.microsoft.com/">Microsoft</option>
<option value="http://www.mozilla.com/">Mozilla</option>
<option value="http://www.opera.com/">Opera</option>
</select>
</form>
</body>
</html>

Damit Sie das Beispiel so anpassen können, dass die neue Seite erst nach dem Anklicken einer Schaltfläche geladen wird, müssen Sie eine weitere Schaltfläche einfügen, wie oben gezeigt wurde. Das entsprechende Listing würde dann folgendermaßen aussehen:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="Auswahl">
<option value="http://www.microsoft.com/">Microsoft</option>
<option value="http://www.mozilla.com/">Mozilla</option>
<option value="http://www.opera.com/">Opera</option>
</select>
<input type="button" value="Go!"
   onclick="navigation_laden(this.form.elements['Auswahl']);" />
</form>
</body>
</html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 31.1     Navigation ohne Links, aber mit JavaScript

Diese Form von »Quicklinks« bietet einen direkten Zugriff auf mehrere Seiten, aber eine Verschachtelung ist hier nicht möglich. Im folgenden Beispiel finden Sie zwei Auswahllisten vor. Wenn Sie in der ersten Auswahlliste einen Eintrag auswählen, werden in der zweiten Auswahlliste die zugehörigen Elemente geladen. So ist eine mehrstufige Navigation mit mehreren Oberkategorien und Untergruppen möglich.

Als einfaches Beispiel nehmen wir die folgenden Kategorien samt Unterpunkten:

Browserhersteller deutsch

Microsoft: http://www.microsoft.de/

Firefox: http://www.firefox-browser.de/

Browserhersteller englisch

Microsoft: http://www.microsoft.com/

Mozilla: http://www.mozilla.com/

Opera: http://www.opera.com/

Bei der Datenstruktur ist es leider nicht mehr möglich, alles nur mit value-Attributen zu machen. Stattdessen werden die einzelnen zu ladenden Seiten sowie die entsprechenden Beschriftungen der Auswahllistenelemente in Arrays gespeichert:

var texte = new Array(
   new Array("---Bitte auswählen---",
             "",
             ""),
   new Array("---Bitte auswählen---",
             "Microsoft (deutsch)",
             "Firefox (deutsch)"),
   new Array("---Bitte auswählen---",
             "Microsoft (englisch)",
             "Mozilla (englisch)",
             "Opera (englisch)")
);
var urls = new Array(
   new Array(""),
   new Array("",
             "http://www.microsoft.de/",
             "http://www.firefox-browser.de/"),
   new Array("",
             "http://www.microsoft.com/",
             "http://www.mozilla.com/",
             "http://www.opera.com/")
);

Natürlich können Sie auch die aus Kapitel 18 bekannte JSON-Notation für das Array urls verwenden; das spart ein wenig Tipparbeit.

Werfen wir nun einen Blick auf das HTML-Formular mit den beiden Auswahllisten:

<select name="ober" onchange="zeige(this);">
   <option>---Bitte auswählen---</option>
   <option>Browserhersteller deutsch</option>
   <option>Browserhersteller englisch</option>
</select>
<select name="unter" onchange="navigation_laden(this);">
   <option value="">---Bitte auswählen---</option>
   <option value=""></option>
   <option value=""></option>
</select>

Um das Skript zu vollenden, müssen noch die zweiten Aufgaben mit JavaScript erledigt werden:

Die Auswahlliste löschen:

auswahllistenreferenz.length = 0;

Die Auswahlliste neu füllen:

for (var i=0; i<urls[kategorienr].length; i++) {
   auswahllistenreferenz.options[i] =
      new Option(texte[kategorienr][i],
                 urls[kategorienr][i]);
}

Das erste Element der Auswahlliste auswählen:

auswahllistenreferenz.selectedIndex = 0;

Fassen wir zusammen: Folgendes Skript bietet Ihnen eine mehrstufige Navigation mit Auswahllisten:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>
<script type="text/javascript"><!--
var texte = new Array(
   new Array("---Bitte auswählen---",
             "",
             ""),
   new Array("---Bitte auswählen---",
             "Microsoft (deutsch)",
             "Firefox (deutsch)"),
   new Array("---Bitte auswählen---",
             "Microsoft (englisch)",
             "Mozilla (englisch)",
             "Opera (englisch)")
);
var urls = new Array(
   new Array(""),
   new Array("",
             "http://www.microsoft.de/",
             "http://www.netscape.de/"),
   new Array("",
             "http://www.microsoft.com/",
             "http://home.netscape.com/",
             "http://www.opera.com/")
);
function zeige(auswahl) {
   var kategorienr = auswahl.selectedIndex;
   auswahl.form.elements["unter"].length = 0;
   for (var i=0; i<urls[kategorienr].length; i++) {
      auswahl.form.elements["unter"].options[i] =
         new Option(texte[kategorienr][i],
                    urls[kategorienr][i]);
   }
   auswahl.form.elements["unter"].selectedIndex = 0;
}
//--></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="ober" onchange="zeige(this);">
   <option>---Bitte auswählen---</option>
   <option>Browserhersteller deutsch</option>
   <option>Browserhersteller englisch</option>
</select>
<select name="unter" onchange="navigation_laden(this);">
   <option value="">---Bitte auswählen---</option>
   <option value=""></option>
   <option value=""></option>
</select>
</form>
</body>
</html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 31.2     Mehrstufige Navigation

Im folgenden Listing sehen Sie wieder die Alternative mit der Schaltfläche, die das Laden der neuen URL auslöst:

<html>
<head>
<title>Navigation</title>
<script type="text/javascript" src="navigation.js"></script>
<script type="text/javascript"><!--
var texte = new Array(
   new Array("---Bitte auswählen---",
             "",
             ""),
   new Array("---Bitte auswählen---",
             "Microsoft (deutsch)",
             "Firefox (deutsch)"),
   new Array("---Bitte auswählen---",
             "Microsoft (englisch)",
             "Mozilla (englisch)",
             "Opera (englisch)")
);
var urls = new Array(
   new Array(""),
   new Array("",
             "http://www.microsoft.de/",
             "http://www.firefox-browser.de/"),
   new Array("",
             "http://www.microsoft.com/",
             "http://www.mozilla.com/",
             "http://www.opera.com/")
);
function zeige(auswahl) {
   var kategorienr = auswahl.selectedIndex;
   auswahl.form.elements["unter"].length = 0;
   for (var i=0; i<urls[kategorienr].length; i++) {
      auswahl.form.elements["unter"].options[i] =
         new Option(texte[kategorienr][i],
                    urls[kategorienr][i]);
   }
   auswahl.form.elements["unter"].selectedIndex = 0;
}
//--></script>
</head>
<body>
<h1>Navigation</h1>
<form onsubmit="return false;">
<select name="ober" onchange="zeige(this);">
  <option>---Bitte auswählen---</option>
  <option>Browserhersteller deutsch</option>
  <option>Browserhersteller englisch</option>
</select>
<select name="unter">
   <option value="">---Bitte auswählen---</option>
   <option value=""></option>
   <option value=""></option>
</select>
<input type="button" value="Go!"
   onclick="navigation_laden(this.form.elements['unter']);" />
</form>
</body>
</html>