JS-Menü Dokumentation / Anleitung
Programm und Dokumentation von Ansgar Federhen / Rhein@Net
Programmversion: 1.4.1 deutsch / 22. Februar 2000
JS-Menü im Internet: http://www.Rheinbreitbach.net/js-menue/
(Englisches Original OmenTree von Colin Tucker / Omensoft)
JS-Menü-Forum: http://www.Rheinbreitbach.net/js-forum/
E-Mail an den Autor: JS-Menue@Rheinbreitbach.net
Benutzer von JS-Menü: http://www.Rheinbreitbach.net/js-menue/links.htm
Meinungen zu JS-Menü: http://www.Rheinbreitbach.net/js-menue/meinung.htm

Übersicht:
- Einleitung
- Was ist JS-Menü?
- Warum sollte ich JS-Menü benutzen?
- Wie kann ich JS-Menü benutzen?
- Wie funktioniert JS-Menü?
- Wie erstelle ich mein JS-Menü?
- Jetzt geht's los!
- Menü-Struktur-Definitionen
- Der Hauptverzeichnis-Eintrag
- Die Verzeichniseinträge
- Die Link-Einträge
- Menü-Layout-Angaben
- Farbdefinitionen
- Weitere Änderungen in der Datei index.htm
- Die FrameSet-Definition
- Die anderen Dateien
- Dateien immer nur zusammen mit JS-Menü anzeigen
- Tipps und Tricks
- Javascript
- JS-Menü-Newsletter und -Forum
- Hinweise zum Update von früheren Versionen
- Lizenzbestimmungen
- Historie

Einleitung     zum Anfang

Hallo und willkommen bei JS-Menü (JS steht dabei für JavaScript).

Ich hoffe, dass Du mit JS-Menü Deine eigene Web-Site (Deinen Web-Bereich) bereichern kannst! JS-Menü ist konzipiert für Homepage-Besitzer, die noch keine oder nur wenig Erfahrung mit JavaScript haben. Mit dieser Anleitung sollte Dir Dein eigenes JS-Menü gelingen; wenn nicht, schreibe mir, damit ich diese Anleitung verbessern kann.

Abonniere den JS-Newsletter, um über Updates von JS-Menü oder andere Scripts informiert zu werden, besuche das JS-Forum, um Tipps und Problemlösungen zu finden oder sieh Dir die Liste der JS-Menü-Benutzer an, um Anregungen für den Einsatz von JS-Menü zu bekommen. Wenn Du JS-Menü schon kennst, sieh Dir an, was sich geändert hat.

JS-Menü ist Freeware, aber trotzdem urheberrechtlich geschützt. Wenn Du JS-Menü verwenden willst, sieh Dir vorher die Lizenzbestimmungen an.

Was ist JS-Menü?     zum Anfang

JS-Menü ist eine javascript-basierte hierarchische Navigationsstruktur für Web-Sites (Web-Bereiche) im Windows-Explorer-Look. Oder anders: Mit JS-Menü kannst Du in einem Teilfenster des Browsers (Frame) Deine Web-Site in einer Baumstruktur darstellen.

Hierarchische Menüstrukturen gibt es schon sehr lange. Sagen Dir die Namen Windows Explorer, Dateimanager oder X-Tree etwas? Natürlich, und genau diese Programme benutzen hierarchische Menüstrukturen.
Jeder PC-Anwender kennt diese hierarchischen Strukturen; JS-Menü ist dem Windows-Explorer nachempfunden, so dass Benutzer von Windows 95/98/2000/NT sich sofort zurecht finden sollten.

Warum sollte ich JS-Menü benutzen?     zum Anfang

Den Studenten, die objektorientierte Programmierung lernen, wird beigebracht, dass uns hierarchische Strukturen vertraut und natürlich sind - egal ob wir PCs benutzen oder nicht. Von Geburt an ordnen Menschen alles in Kategorien ("Schubladen") ein, um die Zusammenhänge der Welt zu verstehen. Eine hierarchische Struktur ist eine einfache Art, sich diese Kategorien vorzustellen und anderen näher zu bringen.

Komplexe Strukturen (wie z.B. Dateisysteme) werden in einer solchen hierarchischen Struktur präsentiert - andernfalls wären sie nicht darstellbar und auch nicht mehr verständlich. Stelle Dir nur einmal vor, Du hättest alle Dateien auf Deiner Festplatte in einem einzigen Verzeichnis, bei heutzutage mehreren tausend Dateien unvorstellbar!

JS-Menü erstellt eine solche hierarchische Baumstruktur für Deine Web-Site, wobei Dateien, Verzeichnisse sowie andere Web-Sites und Internet-Dokumente durch Hyperlinks (Verweise) bzw. URLs (Universal Resource Locator, Internetadressen) als Menüeinträge angeboten werden, aber auch E-Mail-Adressen, News-Gruppen sowie web-basierte Anwendungen (CGI, ASP, Online-Shops usw.) eingebunden werden können. Alles, was durch eine URL benannt werden kann, kann auch in die logische Baumstruktur von JS-Menü aufgenommen werden. Diese logische Baumstruktur ist vollkommen unabhängig von der physikalischen Ablage der Daten.

Wenn Du also JS-Menü benutzt, gibst Du den Besuchern Deiner Web-Site ein hilfreiches Werkzeug an die Hand, um sich auf Deiner Web-Site zurechtzufinden, besonders, wenn es sich um einen großen Webbereich handelt oder die Navigation ausschließlich mit Hyperlinks zu unübersichtlich würde. Aber auch wenn Deine Web-Site nur klein ist, kannst Du Deinen Besuchern sofort einen tollen Überblick über Deine Web-Angebote bieten; sie werden begeistert sein!

Und das Besondere an JS-Menü:
Du kannst das Aussehen des Menüs und die einzelnen Menüeinträge Deines JS-Menüs durch wenige Parameter verändern und anpassen, ohne Dir umfangreiche JavaScript-Kenntnisse anzueignen. Mit dieser Anleitung sollte es Dir gelingen, ohne Kenntnisse von JavaScript ein tolles dynamisches Navigationsmenü in Deine Website zu integrieren. Etwas Tipperei und Ausprobieren ist schon nötig, aber anschließend wirst Du stolz auf Dich und Deine Arbeit sein!

Wie kann ich JS-Menü benutzen?     zum Anfang

JS-Menü ist ein sehr vielseitiges JavaScript; Du wirst sicherlich viele Anwendungsmöglichkeiten finden. JS-Menü ist die Lösung zur Darstellung logischer Strukturen und für verschiedene Präsentationen. Hier einige allgemeine Vorschläge zur Benutzung von JS-Menü:

Dies sind nur einige von vielen Möglichkeiten, JS-Menü zu nutzen. Teste ruhig weitere Möglichkeiten, die Dir einfallen. Wenn Du eine auch für andere Anwender interessante Nutzungsmöglichkeit gefunden hast, teile es anderen Benutzern im Forum mit.

Wie funktioniert JS-Menü?     zum Anfang

Es wäre zu aufwendig, alle Details der JavaScript-Funktionen zu erläutern. Deshalb hier eine Zusammenfassung:

Die Startdatei index.htm ist so aufgebaut, dass,

Im Normalfall (JavaScript=aktiv) ruft also die Startdatei index.htm eine FrameSet-Definition auf, mit der das Browserfenster in zwei (bzw. drei) Unterfenster aufgeteilt wird:

Sobald der Besucher auf einen Verzeichnis- oder Linkeintrag im JS-Menü klickt, wird die entsprechende Seite im Hauptseiten-Unterfenster (seiteFrame) angezeigt. Klickt er auf einen Verzeichniseintrag oder einen Auf-/Zuklappen-Eintrag, wird (zusätzlich) der entsprechende JavaScript-Befehl aus der Datei index.htm ausgeführt und das Menü-Unterfenster in entsprechend veränderter Form angezeigt (Verzeichnisbaum auf- bzw. zuklappen).

Wie erstelle ich mein JS-Menü?     zum Anfang

Die wesentlichen Schritte, um ein eigenes JS-Menü zu erstellen:

  1. Du trägst die einzelnen von Dir gewünschten Menüpunkte im Bereich Menü-Struktur-Definitionen in das Original-Script von JS-Menü (index.htm) ein - dies geht relativ einfach, mehr dazu später;
  2. Du passt das Aussehen des Menüs durch Verändern verschiedener Variablen im Bereich Menü-Layout-Angaben des JS-Menü-Scripts an Deine Vorstellungen an - dies können z.B. Hintergrundfarbe, Textfarbe, Icons o.ä. sein - , auch dazu später mehr;
  3. Du passt die Meta-Tags der index.htm an, benennst Deine Einstiegsseite in seite.htm um, erstellst die Datei nojsmenu.htm und testest alles ausgiebig (am besten mit verschiedenen Browsern);
  4. Du kopierst (lädst per FTP) die Dateien auf Deine Web-Site bzw. in Dein Web-Verzeichnis (Sicherungskopien nicht vergessen!). Außerdem musst Du noch das Verzeichnis \bilder in Dein Web-Verzeichnis kopieren.

Diejenigen, die sich noch nicht mit JavaScript beschäftigt haben, werden sicher jetzt schon verzweifeln - aber keine Panik! JS-Menü wurde bewusst so erstellt, dass von Dir kein komplizierter JavaScript-Code erstellt oder angepasst werden muss. Selbst wenn Du noch nie etwas über JavaScript gehört hast, kannst Du Dir Dein eigenes JS-Menü erstellen; Du wirst Schritt für Schritt durch die gesamte Prozedur geführt. Also - nicht aufgeben, in kurzer Zeit hast Du Dein eigenes JS-Menü erstellt!

Wenn alles geklappt hat - Du hast das Original-Script angepasst und als index.htm mit den anderen Dateien in Dein Web-Verzeichnis geladen -, hat sich Deine Web-Site grundsätzlich verändert! Mit dem Start der index-Datei werden alle Seiten der einzelnen Frames geladen und das JS-Menü baut sich auf. Das Script wird eine erste Baumstruktur entsprechend Deinen Definitionen mit dem Hauptverzeichnis und den direkt darin enthaltenen Menü-Einträgen erstellen.

Durch die JavaScript-Funktionen wird das Menü dynamisch - es erlaubt dem Besucher Deiner Web-Site, durch Anklicken Verzeichnisse zu öffnen und neue Links und Unterverzeichnisse zu durchstöbern. Das hört sich komplizierter an, als es ist; aber Du wirst sehen, wie einfach alles geht.

Jetzt geht's los!     zum Anfang

Fangen wir also an, Dein JS-Menü zu erstellen

Du solltest zuerst Sicherungskopien aller JS-Menü-Dateien (und natürlich auch Deiner eigenen bisherigen Webseiten) machen. Starte dann Deinen Texteditor (z.B. Notepad.exe. Ja, Du hast richtig gelesen, nicht Frontpage oder Composer oder ein anderes Programm, wirklich nur einen Texteditor; siehe dazu das Kapitel Werkzeuge) und öffne die Datei index.htm - ggf. solltest Du das Fenster auf Bildschirmgröße vergrößern, da manche Zeilen ziemlich lang sind und möglichst kein Zeilenumbruch eingefügt werden sollte (Besser ist es natürlich, wenn Du zunächst diese Dokumentation bis zum Ende liest und dann hier weitermachst.).

Was Du jetzt siehst, ist erst einmal der Kopf einer HTML-Datei, wie jede HTML-Datei ihn hat (wenn man mal von den Copyright-Einträgen absieht). Das JavaScript ist mit allen Angaben in diesem Kopf ('Header') untergebracht. Im Anschluss an die Meta-Tags wird dazu erst einmal angegeben, dass jetzt JavaScript-Code beginnt. In Zeile 27 wird dann die Funktion ladeDaten() definiert. In diesem Bereich machst Du alle für das JS-Menü erforderlichen Angaben!

Zunächst stehen dort einige erklärende Kommentarzeilen (die Zeilen, die mit // beginnen; die kannst Du später löschen, damit die Datei kleiner wird) und dann geht es richtig los.

Du siehst, dass der Bereich der Funktion ladeDaten() in zwei Unterbereiche unterteilt ist:

In diesen zwei Unterbereichen wirst Du Änderungen vornehmen, um das JavaScript für Dich anzupassen.

Achte bei Deinen Anpassungen auf die genaue Schreibweise: JavaScript ist z.B. casesensitiv, das heißt, ein Wort mit großen Buchstaben ist nicht das Gleiche wie ein Wort mit kleinen Buchstaben (Bei der Menü-Struktur-Definition musst Du jede Zeile mit 'mD.neu(new..' anfangen , 'MD.neu(new..' klappt z.B. nicht!). Achte vor allem auf die Verwendung von Anführungszeichen und Apostrophs!

Wir beginnen also mit den

Menü-Struktur-Definitionen     zum Anfang

Zuerst das Wichtigste, damit JS-Menü überhaupt Sinn macht: Die Definition der Menüstruktur. Bevor wir in dieses Thema einsteigen, kannst Du ja mal einen Blick in den vorhandenen JavaScript-Code der Datei index.htm werfen und mit der Ansicht im Browser vergleichen; vielleicht verstehst Du dann ja schon den Aufbau der Einträge.

Die Definitionen der einzelnen Menü-Einträge werden in einer Art Array (feststehender Begriff in JavaScript und anderen Programmiersprachen, daher nicht übersetzt, bedeutet etwa Feld oder Tabelle) gespeichert. Es ist aber kein echtes JavaScript-Array. Stattdessen wird ein Objekt namens Satz benutzt, welches (im Gegensatz zu Arrays) keine feste Größe hat und auch keinen Index-Wert für jeden Eintrag benötigt.

Jede Zeile im Definitionsbereich entspricht einem Menü-Eintrag (Du solltest keine Zeilenumbrüche einfügen, das verändert das Menü). Jedes JS-Menü hat genau einen Hauptverzeichnis-Eintrag (ein Baum hat auch nur einen Stamm), die übrigen Einträge sind entweder Verzeichnis-Einträge (Zweige) oder Link-Einträge (Äste).

Der Hauptverzeichnis-Eintrag     zum Anfang

Dein Menü muss - wie bereits gesagt - einen Hauptverzeichnis-Eintrag enthalten, und nur einen! Dieser Eintrag muss an erster Stelle der Liste der Einträge stehen!

Schreibweise des Hauptverzeichnis-Eintrags:

mD.neu(new HVE("<NAME>","<TEXT>","<ICON>","<STATUSTEXT>"));

wobei

Achte auf die genaue Schreibweise! Die Zeichen ( " , ' ) ; sind wichtig für die Lauffähigkeit des JavaScripts, die spitzen Klammern < und > weglassen!

Verzeichnis-Einträge     zum Anfang

Die Definition der Verzeichnis-Einträge erfolgt ähnlich der des Hauptverzeichnis-Eintrags, hat aber eine geringfügig abweichende Schreibweise. Verzeichnis-Einträge benötigen einen Bezug zum übergeordneten Verzeichnis (<UEBERGEORDNETER NAME>'), damit das JavaScript sie richtig in das Menü sortieren kann.

Schreibweise der Verzeichnis-Einträge:

mD.neu(new VE("<NAME>","<UEBERGEORDNETER NAME>","<TEXT>","<URL>","<ICON ZU>","<ICON OFFEN>","<STATUSTEXT>"));

wobei

Link-Einträge     zum Anfang

Jetzt kommen wir zum eigentlichen Sinn und Zweck von JS-Menü: Links (Verweise). Die Schreibweise ist ähnlich und genauso einfach wie die der anderen Einträge.

Schreibweise der Link-Einträge:

mD.neu(new LE("<UEBERGEORDNETER NAME>","<TEXT>","<URL>","<ZIEL>","<ICON>","<STATUSTEXT>"));

wobei

Ist der bei <TEXT> eingetragene Text so lang, dass er nicht in den Menü-Frame passt, kann man ihn auch auf zwei Zeilen verteilen: Dazu werden zwei Linkeinträge erstellt und der Text auf die beiden <TEXT>-Bereiche verteilt. Damit JS-Menü erkennt, dass es sich um einen zweiteiligen Link-Eintrag handelt, muss beim zweiten Eintrag für <ICON> 'leer.gif' eingetragen werden, die Werte bei <ÜBERGEORDNETER NAME>, <URL>, <ZIEL> und <STATUSTEXT> sollten gleich sein. Die beiden Linkeinträge sehen dann ungefähr so aus:
mD.neu(new LE("<UEBERGEORDNETER NAME>","erster Textteil","<URL>","<ZIEL>","<ICON>","<STATUSTEXT>"));
mD.neu(new LE("<UEBERGEORDNETER NAME>","zweiter Textteil","<URL>","<ZIEL>","leer.gif","<STATUSTEXT>"));
Ein Beispiel dazu siehst Du auch im JS-Menü.

Das waren schon alle Menü-Eintrags-Definitionen. Falls Du noch Probleme damit hast, sieh Dir noch einmal die ursprünglichen Einträge in der Datei index.htm an, dann wirst Du wahrscheinlich von alleine darauf kommen, wie es funktioniert.

Menü-Layout-Angaben     zum Anfang

Jetzt musst Du in Deinem Texteditor etwas nach unten gehen, um zum Bereich Menü-Layout-Angaben zu kommen.

Hier kannst Du das Erscheinungsbild Deines Menüs weitgehend beeinflussen, ohne auch nur einen blassen Schimmer von JavaScript zu haben.

Es werden verschiedene Einstellungen wie z.B. das Erscheinungsbild (Farben, Schriften) von JS-Menü definiert. (Hinweis für Benutzer früherer Versionen von JS-Menü: Die Menü-Layout-Angaben hießen bisher 'Benutzerdefinierte Variablen'; die Namen haben sich weitgehend geändert, siehe Historie).

Die Werte zu den einzelnen Angaben werden jeweils zwischen die beiden Anführungszeichen geschrieben.

Schauen wir uns jede Variable einzeln an: ([#] bedeutet, dass die Variable leer sein darf, Anführungszeichen stehen lassen!)

Das waren die Menü-Layout-Angaben. Die Variablen sollten alle selbsterklärend sein; versuche einfach einmal verschiedene Einstellungen und beobachte das Ergebnis in einem Browser; mit der Zeit bekommst Du ein Gefühl für die verschiedenen Werte.

Farb-Definitionen    zum Anfang

Eine Übersicht der hexadezimalen Werte für einzelne (internetsichere) Farben habe ich Dir in der Datei farben.htm beigelegt.

Weitere Änderungen in der Datei index.htm     zum Anfang

Jetzt hast Du das meiste schon geschafft. Ein paar Änderungen solltest Du allerdings noch an der Datei index.htm vornehmen:
- Anpassung der Meta-Tags und
- Anpassung des <Noframe>-Bereichs.
Du möchtest sicher nicht, dass Deine Webseite in Suchmaschinen unter dem Stichwort 'JS-Menü' auftaucht. Gehe deshalb in Deinem Texteditor noch einmal an den Anfang der Datei. Dort stehen ab Zeile 12 mehrere Meta-Tags. Das sind verschiedene Informationen über die Datei wie z.B. Sprache, Autor, Schlüsselwörter usw., die vor allem von Suchmaschinen ausgewertet werden. Passe sie an Deine Gegebenheiten an (Weitere Informationen zu Meta-Tags findest Du hier, ein Freeware-Programm für Windows zur Erstellung der Meta-Tags hier).
Anschließend solltest Du noch den <NOFRAMES>-Bereich ganz am Ende der Datei anpassen.

Die FrameSet-Definition     zum Anfang

Eine weitere Stelle, an der noch Änderungen in Betracht kommen könnten, ist die FrameSet-Definition.

Eine FrameSet-Definition unterteilt das Browserfenster in mehrere voneinander unabhängige Bereiche. In jedem Bereich (Frame) wird eine eigene HTML-Datei angezeigt. Bei JS-Menü wird das Browserfenster in mindestens zwei Frames aufgeteilt: Links das JS-Menü, rechts die anzuzeigende Seite und ggf. unter dem JS-Menü noch ein klappFrame.

Seit Version 1.4.1 gibt es zwei FrameSet-Definitionen in der Datei index.htm:

Die erste FrameSet-Definition befindet sich direkt hinter den Menü-Layout-Angaben (im Original ca. in Zeile 165) und wird dynamisch per JavaScript erzeugt und daher nur berücksichtigt, wenn der Browser des Besuchers JavaScript unterstützt. Die einzelnen HTML-Zeilen der FrameSet-Definition sind in den JavaScript-Befehl document.write(' ....') eingebunden. Einzelne Zeilen sind noch zusätzlich in if(KlapFrame==1){ ... } eingebunden. Dadurch kann das Script Deine Menü-Layout-Angaben berücksichtigen (z.B. ob der klappFrame angezeigt werden soll oder nicht). Eine Änderung der FrameSet-Definition ist nicht nötig, wenn du ein dreigeteiltes (mit klappFrame) oder zweigeteiltes (ohne klappFrame) FrameSet benutzen willst. Wenn Du andere FrameSet-Aufteilungen bevorzugst, solltest Du Dir die Datei fs.htm ansehen: Dort sind verschiedene FrameSet-Definitionen für das JS-Menü beispielhaft aufgeführt. Wenn Du eine dieser FrameSet-Definitionen benutzen willst, lade Dir auch die Datei fs.zip auf Deinen Rechner, darin sind alle index-Dateien der einzelnen Beispiele als fsxx.htm enthalten.

Die zweite FrameSet-Definition befindet sich ganz am Ende der Datei index.htm nach dem </HEAD>-Tag und wird nur berücksichtigt, wenn der Browser kein JavaScript unterstützt bzw. wenn JavaScript abgeschaltet ist. Sie enthält natürlich keinen klappFrame, da dieser in einer Nicht-JavaScript-Version keinen Sinn macht.

Wenn Du weitere Frames einfügen willst, musst Du unbedingt auf die korrekte Syntax von FrameSet-Definitionen achten (siehe fs.htm). Syntaxfehler bei der FrameSet-Definition erzeugen oft JavaScript-Fehlermeldungen, die nicht auf Fehler in der FrameSet-Definition schließen lassen! Viele mir gemeldete angebliche Fehler des JS-Menüs waren auf falsche FrameSet-Definitionen zurückzuführen! Nutze die Beispiele in der Datei fs.htm, SelfHTML oder andere HTML-Bücher/-Anleitungen, um die richtige Schreibweise zu finden!

Noch ein paar Anmerkungen zu FrameSet-Definitionen:

So, das ist alles, was ich Dir über Frames zu sagen habe, bis auf eins: Sei vorsichtig bei der Dimensionierung (Größenangabe) von Frames; benutze keinen zu kleinen Frame für das Menü, den der Besucher dann umständlich selbst vergrößern muss; mache ihn auch nicht zu groß, sonst stehen Besucher mit niedriger Auflösung/kleinem Bildschirm auf dem Schlauch (die Breite des Menü-Frames ist mit 180 im Parameter Menubreite bei den Menü-Layout-Angaben angegeben). Denke auch daran, dass die Browser die Größenangaben u.U. anders interpretieren. Wenn Du die Möglichkeit hast, probiere Dein persönliches JS-Menü auf verschiedenen Plattformen mit verschiedenen Browsern aus.

Eine Stelle, die Du nicht ändern solltest, ist der Copyrightvermerk. Weitere Informationen dazu weiter unten.

Die anderen Dateien     zum Anfang

Mit dem eigentlichen JS-Menü, welches durch die Datei index.htm erzeugt wird, werden noch andere Dateien mitgeliefert:

Dateien immer mit JS-Menü anzeigen     zum Anfang

Erfolgt der Einstieg in Deine WebSite nicht über das Menü (also über die Datei index.htm), kann durch einen Eintrag in der jeweiligen Datei das Menü nachgeladen werden.

Oft sind mehrere Seiten einer Internetpräsentation in Suchmaschinen gelistet. Wird dann eine Seite aus einer Suchmaschine heraus aufgerufen, wird normalerweise nur diese Seite angezeigt, das JS-Menü jedoch nicht. Jetzt kann durch ein kleines JavaScript in jeder Datei erreicht werden, dass beim Aufruf der Datei das JS-Menü geladen und die angeforderte Seite im seiteFrame angezeigt wird.
In allen Dateien, die nur mit JS-Menü aufgerufen werden sollen, musst Du folgendes Script in den Header der Datei, also vor die Zeile mit </HEAD> einfügen:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if(parent.location.href==self.location.href){window.location.href='../index.htm?doku/doku.htm'}
//-->
</SCRIPT>

Dabei musst Du den roten und grünen Bereich anpassen:
Anstatt ../index.htm gibst Du den Dateinamen (ggf. mit Pfad relativ zur aufgerufenen Datei) an, in dem das JS-Menü steht (also normalerweise index.htm), und
anstatt doku/doku.htm gibst Du den Dateinamen (ggf. mit Pfad relativ zur JS-Menü-Datei) an.
Achtung: Dies wird offline vom Internet Explorer und Opera nicht immer unterstützt, online funktioniert es einwandfrei!

Tipps und Tricks     zum Anfang

Hier noch ein paar Tipps, um das Erstellen Deines JS-Menüs zu erleichtern:

  1. Eigentlich ist es egal, in welcher Reihenfolge die Menü-Eintrags-Definitionen in der HTML-Datei stehen (außer natürlich der Haupt-Verzeichnis-Eintrag, der muss an erster Stelle stehen!) - JS-Menü liest alle Einträge ein und sortiert sie anhand dem Wert <UEBERGEORDNETER NAME>, trotzdem ..
    Es ist nicht egal, in welcher Reihenfolge die Menü-Eintrags-Definitionen in der HTML-Datei stehen, wenn innerhalb eines Verzeichnisses eine ganz bestimmte Reihenfolge angezeigt werden soll. JS-Menü liest die Menü-Eintrags-Definitionen von oben nach unten und sortiert die Einträge eines Verzeichnisses in der eingelesenen Reihenfolge. Deshalb werden Einträge eines Verzeichnisses, die vor anderen in der Datei index.htm stehen, auch vor den anderen angezeigt.
    Um es Dir selbst einfacher zu machen, die Script-Datei zu bearbeiten, solltest Du eine Reihenfolge wählen, die Du verstehst (jedenfalls nicht alle Einträge wild durcheinander). Meistens ist dies die Reihenfolge, die auch nachher angezeigt werden soll, aber das muss nicht so sein.
  2. Bei Hauptverzeichniseintrag, Verzeichniseinträgen und Linkeinträgen unter <TEXT> sowie bei prefixHTML und suffixHTML kannst Du anstatt reinem Text auch HTML-Code eingeben. Im JS-Menü-Original findest Du unter suffixHTML ein Beispiel, auch der Hauptverzeichniseintrag ist anstatt Text mit einer Grafik ausgestattet.
    Wenn Du bei diesen Parametern HTML-Code eingeben willst, musst Du darauf achten, dass Anführungszeichen und Hochkommata 'maskiert' werden, weil der JavaScript-Interpreter des Browsers sonst bei einem Anführungszeichen davon ausgeht, dass der Wert für diesen Parameter hier endet. Zeichen werden bei JavaScript maskiert, in dem man ihnen einen Backslash ( \ ) voranstellt. Sieh Dir das Original an, dann wirst Du es sofort verstehen. Bei der Einbindung von Grafiken solltest Du darauf achten, dass diese maximal 16 Pixel hoch sind und mit Border=\"0\" und ALIGN=\"ABSMIDDLE\" angegeben werden.
    Du kannst bei prefixHTML und suffixHTML sogar JavaScript-Code eingeben (z.B. für einen Zähler o.ä.). Allerdings musst Du dabei neben Anführungszeichen und Hochkommata auch Backslashs (mit einem zusätzlichen Backslash) maskieren; der Sriptende-Tag (</SCRIPT>) sollte getrennt werden, Zeilenumbrüche im Script erhälst Du mit \n. Du kannst auch über mehrere Zeilen schreiben, das sieht dann ungefähr so aus:
    suffixHTML = "<SCRIPT LANGUAGE=\"JavaScript\" TYPE=\"text/javascript\">\n<!--\n"+
         "document.write(\"dann kommt der eigentliche JavaScript-Code\")\n"+
         "document.write(\"jede Zeile in Anführungszeichen und die einzelnen Zeilen mit + verbinden\")\n"+
         "//-->\n</SC"+"RIPT>\n"
  3. Benutze die Tab-Taste! Wenn Du die Menü-Struktur-Definitionen erstellst (und generell beim Programmieren), solltest Du Dir angewöhnen, mit der Tabulator-Taste die einzelnen Einträge so weit einzurücken, wie sie auch nachher in der Hierarchie erscheinen (in der Datei index.htm habe ich es Dir vorgemacht). Das wird Dir vor allem beim späteren Ändern dieser Datei helfen; außerdem ist es in der Programmierpraxis allgemein üblich, Code durch die Verwendung von Tabulatoren zu strukturieren und dadurch lesbarer zu machen.
  4. Benutze kein Frontpage, Frontpage Express oder ähnliche Programme für Dateien, die JavaScript enthalten, da diese Programme z.T. den JavaScript-Code verschieben oder zum Teil sogar ändern, so dass JS-Menü nachher u.U. nicht mehr funktioniert. Ich habe nichts gegen Frontpage & Co., ich benutze es selbst ab und zu. Aber für JavaScript (und optimalen HTML-Code) sind Text-Editoren am besten geeignet.
  5. Denke an die Benutzer Deines JS-Menüs, wenn Du es erstellst. Sind die Einträge in einer logischen Reihenfolge? Findet sich der Benutzer zurecht? Sieht das Menü ansprechend aus?
  6. Wenn Du eigene Icons/Grafiken im Menü benutzen willst, achte darauf, dass sie 16 x 16 Pixel groß sind und einen transparenten (durchsichtigen) Hintergrund haben (insbesondere wenn Du ein Hintergrundbild benutzt; transparenter Hintergrund ist allerdings nur beim Gif-Format möglich, aber das Jpg-Format ist für diese Icons eh nicht sinnvoll. Wenn Du Dir die mitgelieferten Icons in einem Grafikprogramm anschaust, siehst Du bei einigen bunte Hintergründe, das ist die Transparenz-Farbe. Wenn Du Icons aus dem Verzeichnis /moreicon benutzen möchtest, kopiere sie zunächst in das /bilder-Verzeichnis.
    Wenn Du eigene Icons erstellt hast und diese anderen Benutzer zur Verfügung stellen möchtest, schicke sie mir per E-Mail, ich werde sie dann in die Moreicon-Sammlung (mit Erwähnung Deines Namens, falls Du möchtest) aufnehmen.
  7. Die meisten Web-Server laufen unter Unix bzw. Linux. Bei diesen Betriebssystemen ist es wichtig, bei allen Datei- und Verzeichnisnamen auf Groß-/Kleinschreibung zu achten, sonst bekommt der Besucher nur Fehlermeldungen angezeigt.  Bei JS-Menü sind alle Dateinamen klein geschrieben. Manchmal passiert es aber, das das Entpackprogramm die Dateien in Großbuchstaben entpackt. Ich kann Dir dazu das Programm Properties Plus empfehlen, eine Erweiterung zum Win-Explorer, mit dem man alle Dateien in Kleinbuchstaben umwandeln kann.
    In Datei- und Verzeichnisnamen solltest Du auch Umlaute, Sonderzeichen und Leerstellen vermeiden! Viele Web-Server kennen auch nur bestimmte Einstiegsseiten, z.B. index.htm, index.html, default.htm (T-Online akzeptiert z.B. nur index.htm und homepage.htm).
  8. Du suchst Anregungen zur Gestaltung Deines JS-Menüs? Dann sieh Dir einfach auf der JS-Menü-Linkseite an, wie andere es gemacht haben (beachte aber das Urheberrecht!).
  9. Du möchtest die Datumsfunktion (letzte Änderung) benutzen? Dann musst Du einen zusätzlichen Eintrag in der jeweiligen HTML-Datei vornehmen:
    An der entsprechenden Stelle muss folgendes stehen:
    <script language="JavaScript">
    <!--
    parent.datum();document.write(parent.dat)
    //-->
    </script>
    Ausgegeben wird dann das Datum in der Form 13. März 2000.
  10. Zu guter Letzt: Glaube mir, es ist der Mühe wert, ein JS-Menü zu erstellen. Wenn Du fertig bist, wirst Du zufrieden sein - mit Dir und mit Deinem JS-Menü! Und die Besucher mit Deiner Website sowieso.

Javascript / Werkzeuge     zum Anfang

Hier noch ein paar Informationen zu JavaScript und Werkzeugen zu JavaScript.

JavaScript-Sprache, HTML-Sprache

JavaScript und HTML zu erklären, würde den Umfang dieser Dokumentation sprengen. Außerdem gibt es bereits ausführliche Dokumentationen für beide Sprachen; warum soll ich mir die Arbeit noch einmal machen? Trotzdem ein paar kurze Hinweise:

Werkzeuge/Programme/Scripte/Links

Hinweise auf Werkzeuge (Editoren) und Programme zu JavaScript, interessante Links zu JavaScript-Anleitungen und -Archiven u.ä. werde ich zukünftig unter http://JavaScript-Welt.de zur Verfügung stellen. Unter http://JavaScript-Welt.de/webring/ findest Du auch die Homepage des deutschen JavaScript Webrings mit interessanten Webadressen zu JavaScript.

JS-Menü-Forum und -Newsletter     zum Anfang

Für Fragen und Diskussionen zu JS-Menü habe ich ein kleines Forum eingerichtet. Wenn Du Probleme mit oder Fragen zu JS-Menü hast, dann trag diese hier ein, damit vielleicht auch andere, die ähnliche Schwierigkeiten haben, davon profitieren. Am besten schaust Du erst mal rein, vielleicht findest Du ja schon eine Antwort. Lob und Kritik sind natürlich auch willkommen.

Um über neue Versionen und Anderes rund um JS-Menü informiert zu werden, kannst Du den JS-Menü-Newsletter abonnieren. Schicke einfach eine E-Mail an JS-News-Abo@Rheinbreitbach.net und gebe im Betreff 'ABOSTART' an. Wenn Du den Newsletter abbestellen möchtest, schicke eine E-Mail an die gleiche Adresse mit dem Betreff 'ABOSTOP'. Ich werde die Adressen natürlich nicht weitergeben.

Hinweise zum Update von Version 1.4 auf Version 1.4.1     zum Anfang

Um von der Version 1.4 auf 1.4.1 upzudaten, sind folgende Schritte erforderlich:

Anschließend (nach einem Test) kannst Du die Datei jsindex.htm löschen.

Hinweise zum Update von Version 1.3 auf Version 1.4     zum Anfang

In der Version 1.4 wurden alle Funktionen geändert, die Ladereihenfolge der Dateien, die Dateinamen und auch die Notation der Verzeichnis- und Linkeinträge hat sich geändert und nicht zuletzt wurden einige Menü-Layout-Einstellungen umbenannt bzw. neu hineingenommen.

Ich kann Dir daher nur empfehlen, bei einem Wechsel zu Version 1.4 Dein Menü komplett neu zu erstellen.

Lizenzbestimmungen     zum Anfang

JS-Menü ist Freeware, das heißt, Du darfst JS-Menü ohne Zahlung einer Lizenzgebühr benutzen, wenn Du die Lizenzbestimmungen beachtest..

Freeware heißt jedoch nicht, dass das Urheberrecht von JS-Menü auf Dich übergeht (Das gilt im übrigen für alle im Internet verwendeten Scripte, Grafiken u.ä.). Das Urheberrecht für dieses Script bleibt nach wie vor bei mir (zum Urheberrecht in Deutschland, Österreich, Schweiz).

Wenn Du JS-Menü verwenden willst, musst Du folgende Lizenzbestimmungen beachten:

Warum dieses Urheberrechts-Gesülze?
Einerseits möchte ich Dich darauf aufmerksam machen, dass das Internet kein rechtsfreier Raum ist und Du bei der Übernahme von Daten (Scripts, aber auch Texte und Grafiken) immer das Einverständnis des Urhebers einholen solltest.
Andererseits habe ich zwar mit JS-Menü-Lizenzen bisher kaum Geld verdient, habe aber meine JavaScript-Kenntnisse unter Beweis stellen können und dadurch einige Aufträge für WebDesign u.ä. erhalten.

Historie     zum Anfang

Die Entwicklung von JS-Menü ist in der Datei historie.htm dokumentiert.

So, das ist schon die ganze Dokumentation zu JS-Menü. Wenn Du trotzdem noch Fragen haben solltest, stelle diese am besten im JS-Menü-Forum. Hier wird nicht nur der Autor dieser Zeilen antworten, auch andere Benutzer haben dort schon mit vielen Tipps beigetragen. Außerdem wird Deine Frage vielleicht auch andere Benutzer beschäftigen.

Ich hoffe, JS-Menü gefällt Dir und wird Deine Web-Site aufwerten! Gutes Gelingen wünscht Dir

Ansgar Federhen

JS-Menü © Rhein@Net E-Mail an den JS-Menü-Autor