Kurzbeschreibung:

Die Navigation einer mit Rahmen gesteuerten Seite wird erleichtert, wenn eine Menü zur Verfügung steht, welches mit Verzweigungen und Untermenüs arbeitet. Ein derartiges Menüsystem stellt diese Anwendung zur Verfügung.


Versionsinformation:

Version: 2.3.1c
Datum: 2.8.1998
Letzte Änderung: 19.2.2001

Beschreibung.

MenüfensterDas Menü ist ein Teil eines Fensters, der in einem eigenen Rahmen dargestellt wird. Er enthält Verweise sowie Verzeigungen, die entweder geschlossen oder geöffnet sind. Ist eine Verzweigung geöffnet, sind weitere Verweise und Verzweigungen sichtbar. Die Verschachtelung kann nahezu beliebig erfolgen.

Das Menü ist folglich nicht eigenständig zu sehen, sondern immer in Kombination mit Rahmen und natürlich weiteren Dokumenten, die innerhalb dieser Rahmen dargestellt werden.

Einbindung.

Die Dateien, die bei dieser Anwendung im Archiv menue.zip enthalten sind, dienen im wesentlichen der Demonstration. Die eigentliche Anwendung ist in den Dateien index.html und menue.js enthalten. Ferner dient menue_ersatz.html als eine Alternativseite darstellt, die erscheint, wenn der Browser nicht in der Lage ist, JavaScript 1.2 zu verarbeiten. Die Datei menue.html enthält lediglich eine Standardinformation und auch einen Hinweis, daß JavaScript aktiviert werden soll. Letzterer erscheint jedoch nur dann, wenn JavaScript nicht aktiviert wurde.

Die Datei index.html wird für den eigenen Bedarf kopiert und angepaßt. Vor der individuellen Anpassung sind aber noch ein paar unbedingt notwendige Teile zu übernehmen.

Zuerst muß das Menüskript implementiert werden. Zu diesem Zweck wird der nachfolgende HTML-Quelltext in den Kopfbereich des Dokuments übernommen:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// === Ersatzfunktionen fuer aeltere Browserversionen ===

function menue()
{
  self[frame_name].location.href = "menue_ersatz.htm"
}

//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="menue.js"></SCRIPT>

In der für das Dokument erforderlichen Rahmendefinition wird der rot markierte Teil implementiert. Zusätzlich sollte man sich den Rahmennamen des Menüs merken, der grün gekennzeichnet ist, denn dieser wird für die Parameter benötigt.

<FRAMESET ... onLoad="menue()">
 <FRAME SRC="menue.htm" NAME="menuetree" SCROLLING=NO>
...
</FRAMESET>

Die individuelle Anpassung bezieht sich vor allem auf den Aufbau des Menüs. Mit Hilfe der Funktion eintrag() werden die Menüeinträge aufgebaut. Als Parameter werden die Einrückung (1 oder größer), der Text des Eintrags, die URL der Seite und ein Zielrahmen angegeben, wobei die letzten beiden Parameter optional sind. Weitere optionale Parameter sind der Titel des Verweises und ein alternatives Bild zur gewählten Standardeinstellung.

Ein Eintrag stellt eine Verzeigung (im Beispiel grün gekennzeichnet) dar, wenn ein Eintrag mit höherer Einrückung folgt (und keine URL und kein Zielrahmen angegeben wird). In allen anderen Fällen handelt es sich um einen normalen Eintrag. Für diesen ist auf jeden Fall auch die URL anzugeben und auch der Zielrahmen, wenn es sich nicht gerade um den Aufruf einer JavaScript-Funktion (im Beispiel rot gekennzeichnet) handelt.

Möchte man einen anderen Titel (zum Beispiel als Alternativtext zum Bild vor dem Eintrag) sehen, so muß auch dieser angegeben werden. Auch die Angaben eines anderen Bilds müssen eintragsweise erfolgen, wobei für Menüpunkte zwei Bilder anzugeben sind (geöffnet und geschlossen).

...

// === Vorbereitung der Eintraege ==

// Parameterbeschreibung:
// 1. Einrueckung des Eintrags
// 2. Bezeichnung im Menue
// 3. URL (optional)
// 4. Zielrahmen oder -fenster (optional)
// 5. Titel (optional)
// 6. Bild (optional) (Untermenue: geschlossen)
// 7. Bild (optional) (nur Untermenue(!): offen)

eintrag(1, "Startseite", "seite.html", "seite")
eintrag(1, "Einfache Seiten")
eintrag(2, "Seite eins bis zwei", "seite1und2.html", "seite")
eintrag(3, "Seite eins", "seite1.html", "seite")
eintrag(3, "Seite zwei", "seite2.html", "seite")
eintrag(2, "Seite drei")
eintrag(3, "Seite drei", "seite3.html", "seite")
eintrag(2, "Seite vier", "seite4.html", "seite")
eintrag(1, "dynamische Seiten")
eintrag(2, "Beispiel", "javascript:parent.dynamische_seite()", null, "Beschreibung des Beispiels")
eintrag(1, "Externe Verweise", null, null,
        "Verweise in´s WWW", "extra_geschlossen.gif", "extra_offen.gif")
eintrag(2, "www.rabich.de", "http://www.rabich.de", "_top",
        null, "extra.gif")

...

Die Aufgabe der Darstellung der tieferliegenden Einträge übernehmen die Funktionen der Anwendung.

Neben dem Menü sind andere Parameter anzugeben. Werden sie nicht angegeben, so werden Standardeinstellungen gewählt.

Das war's!

Die Parameter.

Parameter Beispielwert Beschreibung Wertebereich, Format
body_bgcolor "000066" Hintergrundfarbe Zeichenkette mit RGB-Farbangabe RRGGBB
body_background "hintergrund.gif" Hintergrundbild Zeichenkette mit URL eines Hintergrundbilds (leere Zeichenkette "" für kein Hintergrundbild)
body_text "CCCCCC" Textfarbe Zeichenkette mit RGB-Farbangabe RRGGBB
body_link "FFFFFF" Hyperlinkfarbe (Standard) Zeichenkette mit RGB-Farbangabe RRGGBB
body_alink "FFCCCC" Hyperlinkfarbe (aktiv) Zeichenkette mit RGB-Farbangabe RRGGBB
body_vlink "CCFFCC" Hyperlinkfarbe (besucht) Zeichenkette mit RGB-Farbangabe RRGGBB
body_hover "FFFFCC" Hyperlinkfarbe (wenn sich der Mauszeiger über dem Hyperlink befindet) Zeichenkette mit RGB-Farbangabe RRGGBB
a_underline false true: Hyperlinks unterstrichen, false: Hyperlinks nicht unterstrichen Boole'scher Wert (true oder false)
menue_pre "<B><SMALL>" HTML-Tags vor Untermenü Zeichenkette mit HTML-Tags
menue_post "</SMALL></B>" HTML-Tags nach Untermenü Zeichenkette mit HTML-Tags
eintrag_pre "<SMALL>" HTML-Tags vor Eintrag Zeichenkette mit HTML-Tags
eintrag_post "</SMALL>" HTML-Tags nach Eintrag Zeichenkette mit HTML-Tags
menue_titel "<H1>Men&uuml;</H1>" Menütitel Zeichenkette mit HTML-Tags und Titel
menue_style "font-family: Verdana, Arial, sans-serif;" CSS-Angaben für Menü Zeichenkette mit CSS-Angaben (und abschließendem Semikolon)
rand 0 Abstand zum Dokumentrand Numerische Angabe (Pixel)
bild_leer "leer.gif" Bilddatei für Platzhaltergrafik Zeichenkette mit URL einer Bilddatei
bild_eintrag "normal.gif" Bilddatei für normalen Eintrag Zeichenkette mit URL einer Bilddatei
bild_menue_offen "offen.gif" Bilddatei für geöffnetes Untermenü Zeichenkette mit URL einer Bilddatei
bild_menue_geschlossen "geschlossen.gif" Bilddatei für geschlossenes Untermenue Zeichenkette mit URL einer Bilddatei
bild_breite 12 Breite der Bilddateien Numerische Angabe (Pixel)
bild_hoehe 12 Höhe der Bilddateien Numerische Angabe (Pixel)
frame_name "menuetree" Name des Rahmens, in dem der Menübaum dargestellt wird Zeichenkette
rebuild true true: aufgeklappte Menüs merken, false: nicht Boole'scher Wert (true oder false)
extra true Extrafunktionen (true: aktiv, false: passiv) Boole'scher Wert (true oder false)
extra_text_expand "Aufbauen" Text für Extrafunktion "Expand" Zeichenkette
extra_text_collapse "Abbauen" Text für Extrafunktion "Collapse" Zeichenkette
extra_pre "<SMALL>" HTML-Tags vor Extrafunktionen Zeichenkette mit HTML-Tags
extra_post "</SMALL>" HTML-Tags nach Extrafunktionen Zeichenkette mit HTML-Tags
exclusive false true: Untermenüs exklusiv öffnen, false: Mehrere Untermenüs lassen sich gleichzeitig öffnen Boole'scher Wert (true oder false)
copyright true true: Copyright-Hinweis anzeigen, false: nicht Boole'scher Wert (true oder false)

Und sonst?