1 und 1 Webhosting Angebotsaktion

Ein Dropdown-Menü zur Navigation

Notiz Eine platzsparende Möglichkeit zur Navigation ist ein Dropdown-Menü.

Eine platzsparende Möglichkeit zur Navigation ist ein Dropdown-Menü. Hier ein Beispiel:


Hier der dazugehörige Quellcode mit Informationen zur Anpassung an die eigene Webseite:


In den Head-Bereich muss ein Javascript eingefügt werden, siehe nachfolgend:

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

function surfto(form) {
var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent");
}

// - End of JavaScript - -->

</SCRIPT>
</HEAD>

Wenn Sie Frames verwenden, müssen Sie im Head-Bereich den Zielframe ändern.

Beispiel:

Vorher: window.open(form.dest.options[myindex].value, target="_parent");
Geändert: window.open(form.dest.options[myindex].value, target="home");

home steht hier für den Namen des Zielframe, in dem die aufgerufene Seite geöffnet wird.

Jetzt können Sie im Body-Bereich das Dropdown-Auswahlfeld einfügen:

<BODY>

<FORM NAME="myform">
<SELECT NAME="dest" SIZE=1>
<OPTION SELECTED VALUE="http://URL#1">Description1
<OPTION VALUE="http://URL#2">Description2
<OPTION VALUE="http://URL#3">Description3
<OPTION VALUE="http://URL#4">Description4
</SELECT>
<INPUT TYPE="BUTTON" VALUE="GO NOW!" onClick="surfto(this.form)">
</FORM>

</BODY>
</HTML>

Was muss im Body-Bereich angepasst werden?

  • Die Links. Ändern Sie <OPTION VALUE ="http://URL" in die gewünschte Zielurl, z.B. <OPTION VALUE="http://www.yahoo.de">
  • Die Beschreibung der Links. Ändern Sie <OPTION VALUE="http://URL">Description1 z.B. in <OPTION VALUE="http://www.yahoo.de">Yahoo Deutschland
  • Das Wort SELECTED im <OPTION> Tag kennzeichnet den Link, der bei Aufruf der Seite mit dem Dropdown-Feld angezeigt wird. Dies ist der Link, wenn der User sofort auf Go now! Button klickt, ohne einen anderen Link auszuwählen.

Leuchtende Glühbirne Weitere Rubriken, die für Sie interessant sein könnten:

  • Javascripts - viele Links zu Javascript-Quellen
  • Navigation - verschiedene Navigationsmöglichkeiten kurz vorgestellt
  • QQmenu - Navigationsmenü wie bei Windows, d.h. Sie können Verzeichisse auf- und zuklappen. Kostenlos und kinderleicht einzubauen.



1 und 1 Webhosting eins

Fehler melden! Haben Sie einen Fehler auf dieser Seite gefunden? Bitte gleich hier melden!

Hier die neuesten Postings aus unserem Homepage-Forum:



STRATO Online-Tagebuch  - jetzt bestellen!

01.08.2010 01:14:45 © Tanja & Karl Oltmanns - XHTML/CSS. User online 18 User online. Ladezeit 0.0095 SekundenWEBCounter by GOWEB - gehostet bei 1&1 Webhosting - Browser-Statistiken -