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:
|
Das 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.
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!
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ü</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 ) |