Eine kleine Navigation mit Target mittels Auswahlfeld und JavaScript.
Videoanleitung
Anleitung
In diesem Tutorial wollen wir uns eine kleine Navigation mittels eines Dropdown-Feldes anschauen. Bei Auswahl eines Elements soll eine bestimmte Seite geöffnet werden. Zusätzlich wollen wir, dass wir festlegen können, ob wir die Seite in einem neuen Fenster öffnen wollen.
HTML-Code
Unser HTML-Code sieht so aus:
<select name="testforen" onchange="openNav(this.value);">
<option value="">Biite Auswahl treffen</option>
<option value="http://www.ekiwi.de|_blank">eKiwi.de
<option value="http://www.da-software.net|_blank">DA-Software.net
<option value="http://der-pranger.info">Der-Pranger
<option value="http://ekiwi-blog.de">eKiwi-Blog.de
</select>
Soweit ein normales Dropdown, die URL steckt im „value“, genauso wie das Ziel des Links, nach dem Link können wir mit | das Ziel abtrennen. Wird kein Ziel angegeben, wird der Link im gleichen Fenster oder Frame geöffnet. Bei Auswahl wird die Funktion „openNav“ aufgerufen.
Java-Script
Die Funktion „openNav“:
<script type="text/javascript">
function openNav(s) {
let index = s.indexOf("|");
let url = s;
let target = "_self";
if (index != -1) {
url = s.substring(0, index);
target = s.substring(index + 1);
}
if (url != "") window.open(url, target);
}
</script>
Hier lesen wir zuerst den Link aus, prüfen ob ein Ziel abgegeben wurde und falls ja, dann extrahieren wir dies. Anschließend öffnen wir den Link.
