(Stand: 22.12.24, Adresse: http://www.grammiweb.de/anleitungen/ka_pulldown.shtml)
Pulldowns leichtgemacht
Häufig werden statt herkömmlicher Navigationsleisten Pulldown-Menüs eingesetzt, um dem Besucher das Surfen durch die eigenen Seiten zu ermöglichen. In dieser Kurzanleitung zeigen wir Ihnen, wie dies funktioniert.
Ein Pulldown-Menü bietet eine praktische Alternative zu allzu ausladenden Navigationselementen, können hier doch unendlich viele Verweise in einer einzigen Zeile gesammelt werden.
Ein Beispiel:
Ein solches Menü kann sowohl für den Einsatz auf einzelnen Seiten als auch innerhalb eines Framesets verwendet werden.
Einsatz auf einzelnen Seiten
Ein Pulldown-Menü wird in der Regel auf Basis von JavaScript realisiert. So ist es einfach und unkompliziert zu erstellen und zu warten. Der dazu benötigte Code sieht wie folgt aus und sollte an der Stelle der Webseite in deren Quelltext eingebunden werden, an der beim Aufruf mit dem Browser das Menü erscheinen sollte (also irgendwo im BODY-Segment der Seite, zwischen <BODY> und </BODY>):
<script
language="JavaScript">
<!-- Verstecken für ältere Browser --
function sprung(form)
{
var zielseite=form.zielwahl.selectedIndex
if (form.zielwahl.options[zielseite].value != "0")
{
location=form.zielwahl.options[zielseite].value;
}
}
// Ende Verstecken -->
</script>
<form NAME="formular">
<p>
<select NAME="zielwahl" onChange="sprung(this.form)"
SIZE="1">
<option SELECTED VALUE="0"> ----- Wählen Sie aus: -----
</option>
<option VALUE="URL#1">URL#1 Beschreibung
</option>
<option VALUE="URL#2">URL#2 Beschreibung
</option>
<option VALUE="URL#3">URL#3 Beschreibung
</option>
<option VALUE="URL#4">URL#4 Beschreibung
</option>
</select>
</p>
</form>
Der grün markierte Text bezeichnet das eigentliche JavaScript. In diesem wird der Inhalt der Variable "zielwahl" erst einmal darauf geprüft, ob er den Wert "0" trägt. Ist dies der Fall, wird keine Aktion eingeleitet. Im anderen Falle wird der Wert als neue Location gesetzt, was dem Browser ein neues Ziel mitteilt. Diese ganze Prozedur wird in der Funktion "sprung" definiert.
Der Wert der Variable "zielwahl" wird in dem aus dem blau markierten Text resultierenden Formular ermittelt. Dieses Formular gibt verschiedene Optionen, die einen Wert ("VALUE") in die Variable geben. Dieser Wert besteht entweder aus "0", was keine Aktion auslöst, oder einer Zieladresse (URL).
Die Eingabe der URL kann hierbei relativ oder real erfolgen. Relativ bezeichnet hier ein Ziel, welches im gleichen Onlineprojekt zu erreichen ist (beispielsweise "../java/index.shtml"), real eine wirkliche Adresse (z. B. "http://www.grammiweb.de/).
Dank der Möglichkeit, den Wert "0" quasi als neutralen Platzhalter einzusetzen, ermöglicht auch den Einsatz von zusätzlichen Kommentaren (im Beispiel orange markiert) oder von Teilern (hellblau hervorgehoben), die das Layout der Verweisliste gliedern sollen. Hierzu wird einfach der gewünschte Inhalt ebenfalls als Option angegeben:
...
<option VALUE="URL#1">URL#1 Beschreibung
</option>
<option VALUE="0">Hier
kann alles Mögliche stehen </option>
<option VALUE="URL#2">URL#2 Beschreibung </option>
<option
VALUE="0">- - - - - - - - - - - - - - - - - - -
- - - - - </option>
<option VALUE="URL#3">URL#3 Beschreibung </option>
...
Leider kann dieses Script in seiner bisherigen Form nur auf einzelnen Seiten angewendet werden, was bedeutet, dass die Seite, die das Script beinhaltet, nach Auswahl eines Zieles durch eine neue ersetzt wird. Soll das Script innerhalb eines Framesets von einem Frame aus ein anderes beeinflußen, ist eine kleine Modifikation notwendig:
Einsatz innerhalb eines Framesets
Die Anpassung an ein Frameset ist recht einfach vorzunehmen: Ergänzen Sie die Zeile
location=form.zielwahl.options[zielseite].value;
einfach durch die folgende, wobei "name" durch die Bezeichnung des Frames ersetzt werden sollte:
parent.name.location.href=
form.zielwahl.options[zielseite].value;
Wollen Sie also ein Frameset, bestehend aus zwei Frames ("links" und "rechts"), durch ein Pulldown-Menü erweitern, welches von "links" auf "rechts" Einfluss nimmt, müsste die Zeile wie folgt lauten:
parent.rechts.location.href=
form.zielwahl.options[zielseite].value;
Ein abschließender Hinweis
Leider basiert dieses Menü auf einem JavaScript. Hierdurch ergibt sich das Problem, dass Besucher, die die JavaScript-Option ihres Browsers deaktiviert haben, zwar das Menü als solches angezeigt bekommen, ein Klick aber keine Funktion ausführt. Um auch auf solche Eventualitäten einzugehen, sollte eine alternative Navigation das Surfen durch das Onlineprojekt ermöglichen.
[an error occurred while processing this directive] [an error occurred while processing this directive]© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 22.12.2024
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt