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

Navigation via Dropdownfeld:
<!-- Hier beginnt der Navigationsteil. Dieses Skript können sie unter All-Community.de kostenlos downloaden. (Bitte diesen Hinweis nicht entfernen) --> <select size="1" onchange="window.open(options[selectedIndex].value.split('$')[0], options[selectedIndex].value.split('$')[1])"> <option selected value="ziel_1.htm$_self">Ziel_1 als neues Fenster öffnen</option> <option value="ziel_2.htm$_self">Ziel_2 in den 'Hauptframe' öffnen</option> </select> <!-- Ende Navigationsteil --> <!-- Erläuterung: Für jede gewünschte Seite muss eine "option" vorhanden sein. Bitte geben sie die ZielURL als value=URL an und das ZielFenster bzw. Zielframe direkt dahinter als $ZIEL. Dabei steht "_self" für das aufrufende Fenster selbst, "_blank" für ein neues, "_top" für das gesamte Browserfenster. Bei jeder anderen Angabe wird die URL im gleichnamigen Frame geöffnet. Bitte beachten sie, dass "$" hier die URL der Seite und den Namen des Zielframes voneinander trennt. -->

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>

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: