HTML-Navigation mit Dropdown und JavaScript

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.

Beispiel im Browser testen

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert