Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Navigation

Schwierigkeit: für Fortgeschrittene

 

Navigation via Dropdownfeld:

Beschreibung:         Navigation über Dropdowns

Als eine gute Alternative zu normalen Menüs, die viel Platz einnehmen, kann man Dropdownfelder verwenden. Die Handhabung ist simpel, auch wenn wir hier einige Kenntnisse in HTML - oder einen guten HTML-Editor - voraussetzen wollen.


Quelltext:

Zur Verdeutlichung: Wir geben dem Formular (form) einen JavaSkript-Namen über name="nav" - ebenso dem Dropdownfeld, dass hier "liste" heißt. Der Grund ist simpel: nur so können diese Objekte in JavaScript adressiert werden (d.h. nur so kann man diese Objekte tatsächlich benennen - ohne Namen bleiben diese Objekte 'anonym' und es kann nicht auf sie zugegriffen werden). Die Adresse des Dropdownfeldes ist: document.nav.liste. Hier sehen sie, dass zuerst das Formular und dann das Dropdownfeld in der Adresse auftaucht. Das liegt daran, dass Formularelemente wie Dropdowfelder sinnvollerweise immer nur in Formularen verwendet werden dürfen.
"onchange" besagt, dass die Aktion ausgeführt werden soll, sobald der Nutzer den Wert des Objektes (hier des Dropdownfeldes) ändern - d.h. in diesem Fall: er eine andere Option aus der Liste wählt.
Zunächst müssen wir wissen, WELCHE Option eigentlich gewählt wurde. Dazu verwenden wir die Eigenschaft "selectedIndex" des Dropdownfeldes. Dieser Wert ist eine Zahl von 0 bis zur Zahl der letzten Option. Der Grund: Dropdownfelder sind Objekte, die ihrerseits wiederum Objekte als Eigenschaft haben:  die Eigenschaft "options" des Dropdownfeldes ist ein Array, dass aus Objekten - den einzelnen Optionen - besteht. Diese haben wiederum Eigenschaften (sollten sie das noch nicht verstehen, ist es nicht so schlimm - glauben sie mir einfach, dass es funktioniert).

Folgende Zeilen haben folglich den gleichen Effekt:

var a = document.nav.liste.selectedIndex;
var ziel = document.nav.liste.options[a].value

var ziel = document.nav.liste.options[document.nav.liste.selectedIndex].value

Das untere Skript ist quasi eine Abkürzung des Skriptes oben. Es hat außerdem den Vorteil, dass wir eine Variable einsparen.

"ziel_1.htm" oder "ziel_2.htm" als Werte der Optionen des Dropdownfeldes sind hier die URLs der Zielseiten. Diese werden mit dem Skript oben in die Variable "ziel" ausgelesen. Alles was wir nun noch tun müssen, ist die gewünschte Seite in den Frame unserer Wahl zu laden. Wir verwenden dazu window.open().

Hier gilt folgende Syntax:

window.open(
  "URL des Ziels",
  "Name des Frames oder Fensters in das die Seite geöffnet werden soll"
);

In unserem Beispiel also window.open(ziel, 'Hauptframe'); - wobei Hauptframe der Name des Zielframes ist. Wenn sie die URL in das Gleiche Fenster öffnen wollen, lassen sie diesen Eintrag einfach komplett weg - oder besser: ersetzen sie ihn durch '_self'.

Beispiel ...

Tipp: Seit HTML 4.0 ist es möglich, Einträge in Dropdownmenüs zu gruppieren und Zwischenüberschriften einzufügen.
Allerdings nur in Browsern, die den Standard bereits unterstützen: das sind z.Bsp. IE, Netsc. und Opera jeweils ab Version 6

Syntax:
<optgroup label="Zwischenüberschrift">
  <option>...</option>
  <option>...</option>
</optgroup>

explizite (saubere) Variante

<form name="nav">
<select name="liste" size=1 onchange="
a=document.nav.liste.selectedIndex;
b=document.nav.liste.options[a].value;
window.open(b, 'Hauptframe')
">
<option selected value="ziel_1.htm">
  Ziel_1
</option>
<option value="ziel_2.htm">
  Ziel_2
</option>
</select>
</form>

implizite (kürzere) Variante

<select size=1
onchange="window.open(options[selectedIndex].value, 'Hauptframe')">
<option selected value="ziel_1.htm">Ziel_1</option>
<option value="ziel_2.htm">Ziel_2</option>
</select>

Beide Beispiele haben die gleiche Wirkung.

Hinweis:

Gelegentlich ist es erforderlich, den Zielframe oder -fenster eines Links getrennt anzugeben.
Dann zum Beispiel, wenn sie nur einzelne (möglicherweise externe) Links im neuen Fenster anzeigen lassen wollen.
Dazu kann das Skript entsprechend um ein "target" (eng. Ziel) für jeden Link erweitert werden.

<select size=1 onchange="window.open(
     this.options[selectedIndex].value.split('$')[0],
     this.options[selectedIndex].value.split('$')[1])
">
<option selected value="ziel_1.htm$_blank">
  Ziel_1 als neues Fenster öffnen
</option>
<option value="ziel_2.htm$Hauptframe">
  Ziel_2 in den 'Hauptframe' öffnen
</option>
</select>