menugen1

Menu Generator 1.1

Bitte beachten Sie: neue Version verfuegbar!

Index:

         Kurzbeschreibung
         Features
         Inhalt des Download-Paketes
         Download
         Anleitung
                  Notwendige Anpassungen an der Webpage
                  Definition und Konfiguration des Menus
                  Schrift-Stile
         Jetzt kanns losgehen!
         Weitere Dokumentation
         Copyright

Kurzbeschreibung:

Beim Menu-Generator handelt es sich um ein Javascript-Programm, welches DropDown-Menus in Ihre Webpage integriert! aeusserst einfach Handzuhaben und mit sehr vielen Einstellmoeglichkeiten! Wenn Sie wollen, koennen Sie Menus im Stile der Windows-Menus erzeugen oder ganz nach Ihrem persoenlichen Stil! Einfach eine Liste der gewuenschten Menu-Eintraege angeben und schon haben Sie DropDown-Menus mit beliebig vielen Submenus auf Ihrer Webpage!

Der Menu-Generator ist gratis und frei verwendbar - laden Sie sich den Menu-Generator von unserer Seite auf Ihren PC!

uebrigens: Einen schnellen Eindruck ueber die Funktionsweise des Menu-Generators erhalten Sie, wenn Sie sich das DropDown-Menu der "trueworld"-Seiten anschauen...

Features:

-	einfache Handhabung
-	schnell in Ihre Webpage integriert
-	voll konfigurierbar
-	beliebig viele Sub-Menus
-	Jedes Menu/Sub-Menu kann horizontal oder vertikal angezeigt werden
-	Hintergrundfarbe/Hintergrund-Bild fuer jeden Menu-Eintrag separat konfigurierbar
-	Hintergrundfarbe/Hintergrund-Bild fuer ausgewaehlte Menu-Eintraege frei und unabhaengig vom "normalen" Hintergrund definierbar
-	"Tooltips" fuer erklaerende Kommentare.
-	"Preload" von Hintergrundbildern (Alle Hintergrundbilder werden am Anfang geladen, damit nicht beim Aufklappen von Sub-Menus Bilder nachgeladen werden muessen.
-	Schriftstil fuer jeden Menu-Eintrag separat konfigurierbar
-	Unterstuetzt folgende Konzepte: LAYER (Netscape 4.x und hoeher), DIV (InternetExplorer 4.x und hoeher), DOM (Netscape/InternetExplorer 6.x und hoeher)
-	Unterstuetzt CSS (CascadingStyleSheets) fuer die Schriftstile
-	Frei positionierbar auf Ihrer Webpage
-	Waehlbare Ausrichtung der Texte (left, center, right)
-	Waehlbare Ausrichtung der Menus (left, center, right)
-	Waehlbare Aufklapp-Seite der Sub-Menus (left, auto, right)
-	Menu-Eintraege auf Wunsch mit Graphik markieren, wenn Links hinterlegt sind.
-	Menu-Eintraege ohne hinterlegten Link koennen auf Wunsch "nicht auswaehlbar" gemacht werden.
-	Menu-Eintraege ohne hinterlegten Link koennen auf Wunsch einen anderen Schriftstil haben.
-	Links werden im Statusbar des Browsers angezeigt, wenn sie ueberfahren werden
-	Vordefinierte Graphiken (Pfeile etc.) koennen durch eigene ausgewechselt werden.

Inhalt des Download-Paketes:

-	generator.js	Javascript-Programm
-	styles.css	Schriftstile-Definition
-	arrow_left.gif	Pfeil links (zeigt ein Submenu an)
-	arrow_right.gif	Pfeil rechts (zeigt ein Submenu an)
-	link_left.gif	Link-Graphik links (zeigt einen Link an)
-	link_right.gif	Link-Graphik rechts (zeigt einen Link an)
-	index.htm	Beispiel-Webpage
-	help.pdf	Anleitung (diese Webseite)

Download:

menugen.zip (mit deutschem Handbuch - 129.4 Kb)

menugen_en.zip (mit englischem Handbuch - 110.9 Kb)

Anleitung:

Notwendige Anpassungen an der Webpage

1)

Das Javascript-Programm ist ein separates File und muss deshalb im Header der Webpage referenziert werden, auf welcher das Menu dargestellt werden soll. Dasselbe gilt auch fuer das CSS-File welches die Schriftstile enthaelt. Es ist ihnen freigestellt, ob Sie die Files im selben Folder wie Ihre Webpage speichern wollen oder an einem anderen Ort - bitte passen sie entsprechend die Referenzierungen (rot) an:

<html>
<head>
<title>Menu Generator: Example</title>
<link type="text/css" href="styles.css" rel=stylesheet>
<script type="text/javascript" src ="generator.js"></script>
</head>
:
:

2)

Damit spaeter die Menus nach dem Laden der Seite auch angezeigt werden, muss im BODY-Tag ein entsprechender Aufruf stattfinden (entspricht Beispiel-Seite "index.htm").

:
:
<body onLoad="M_create();" onResize="M_resize();">
:
:

Dies sind bereits alle Anpassungen im HTML-File bzw. der Webpage auf welcher das Menu angezeigt werden soll.

Definition und Konfiguration des Menus

Natuerlich muessen Sie jetzt noch die gewuenschten Menu-Eintraege und Konfiguration der Menus definieren. Dies geschieht im Javascript-Programm "generator.js" selber. Bitte oeffnen Sie das File in einem Text-Editor, damit Sie die notwendigen Anpassungen machen koennen.

Wenn Sie sich das Programm ansehen, erkennen Sie drei Bereiche, unterteilt durch Kommentar-Boxen. Die Kommentarboxen beschreiben den jeweils nachfolgenden Programmbereich und sollten vor dem Publizieren auf dem Internet geloescht werden, um Platz und damit Ladezeit zu sparen.

Im ersten Bereich werden die allgemeinen Menu-Konfigurationen angegeben (z.B. Position des Menus, Ausrichtung etc.).
Bitte ersetzen Sie die Beispieldaten durch Ihre eigenen ( rot )!

:
:
// _______________________________ \/ menu configuration (user area) \/ ___...
:
:
// ______________p_l_e_a_s_e___d_e_l_e_t_e___t_h_i_s___c_o_m_m_e_n_t___b_o_x...

var m_align    = 'center';
var m_margin   = 10;
var m_top      = 10;
var m_popup    = 'right';
var m_showlink = 'highlite,icons,style';
var m_icn    = new Array(new Image(), new Image(), new Image(), new Image());
m_icn[0].src = "arrow_left.gif";
m_icn[1].src = "arrow_right.gif";
m_icn[2].src = "link_left.gif";
m_icn[3].src = "link_right.gif";
:
:

Beschreibung der Parameter:

Parameter	Beschreibung	Wertebereich
m_align	Definiert die Ausrichtung des Hauptmenus auf der Webpage.	'left' = links-buendig 'center' = zentriert 'right' = rechts-buendig
m_margin	Horizontaler Abstand des Haupmenus vom Rand der Webpage (links, wenn links-buendig - rechts, wenn rechts-buendig).	Pixel
m_top	Vertikaler Abstand des Haupmenus vom oberen Rand der Webpage.	Pixel
m_popup	Definiert die Seite, auf welcher evt. vorhanden Submenus aufklappen sollen, wenn ein Menu-Eintrag mit der Maus ueberfahren wird.	'left' = Submenus werden links vom Parent-Menu geoeffnet 'auto'= auf der linken Seite des Haupt-Menus untergeordnete Sub-Menus werden rechts aufgeklappt und Sub-Menus welche auf der rechten Seite des Hauptmenus untergeordnet sind, werden links aufgekplappt (Damit sollte auch bei vielen Subemenus, die Anzeige nicht ueber den Bildschirmrand hinausgehen). 'right' = Submenus werden rechts vom Parent-Menu geoeffnet.
m_showlink	Gibt an, wie ein Menu-Eintrag dargestellt werden soll, wenn es ein Link ist bzw. wenn es kein Link ist. Kombinieren Sie die Parameter nach Ihrem Wunsch (abgetrennt durch ',').	'highlite' = Eintraege ohne Link werden nicht hervorgehoben beim ueberfahren der Maus 'icons'= Eintraege mit Links werden durch eine Link-Graphik markiert. 'style' = Die Schrift der Eintraege ohne Link wird anders dargestellt. Dazu muessen die "style"-Definition (siehe Kapitel Schrift-Stile) doppelt vorhanden sein, wobei jeweils ein Schriftstil den Prefix "weak" haben muss - dieser Schriftstil wird dann benutzt fuer Menu-Eintraege ohne Link.

Wenn Sie moechten, koennen Sie zusaetzlich die 4 Graphiken ersetzen - einfach die URL der Graphik ersetzen.

Im zweiten Bereich wird die Struktur des Menus festgelegt und die einzelnen Menus definiert.
Bitte ersetzen Sie die Beispieldaten durch Ihre eigenen (rot)!

:
:
// _______________________________ \/ menu definition (user area) \/ ___...
:
:
// ______________p_l_e_a_s_e___d_e_l_e_t_e___t_h_i_s___c_o_m_m_e_n_t___b_o_x...

var m_df   = new Array();
m_df[0]    = new Array();
m_df[0][0] = new M_menu (false, "center", 0);
m_df[0][1] = new M_entry("menu-0 entry-1", ""     , "_blank", "title", 170, 25,                          5, "#92A8B0", "#728890",  1, "comment 1");
m_df[0][2] = new M_entry("menu-0 entry-2", "<URL>", "_blank", "title", 170, 25,                          5, "#92A8B0", "#728890",  2, "comment 2");

m_df[1]    = new Array();
m_df[1][0] = new M_menu (true, "left", 1);
m_df[1][1] = new M_entry("menu-1 entry-1", "<URL>", "_blank", "entry", 200, 18,                          0, "#92A8B0", "#728890", -1, "");
m_df[1][2] = new M_entry("menu-1 entry-2", ""     , "_blank", "entry", 200, 18,                          0, "#92A8B0", "#728890", -1, "comment 3");

m_df[2]    = new Array();
m_df[2][0] = new M_menu (true, "left", 1);
m_df[2][1] = new M_entry("menu-2 entry-1", ""     , "_blank", "crazy", 200, 18,                          0, "#92A8B0", "#728890", -1, "");
m_df[2][2] = new M_entry("menu-2 entry-2", "<URL>", "_blank", "crazy", 200, 18,                          0, "#92A8B0", "#728890", -1), "comment 4";
:
:

Um die Menu-Struktur einfach abbilden zu koennen, wird eine dynamische, 2-Dimensionale Tabelle verwendet. Die erste Dimension steht fuer die Menus und die zweite Dimension steht fuer die einzelnen Menu-Eintraege. Zu zaehlen wird jeweils bei 0 begonnen.

m_df[0] beinhaltet also eine Tabelle mit allen Menu-Eintraegen des Hauptmenus.
m_df[1] beinhaltet eine Tabelle mit allen Menu-Eintraegen des ersten Submenus
etc.

Die Verknuepfung der einzelnen Submenus mit Ihren 'Eltern-Elementen' (= Menu-Eintrag des uebergeordneten Menus), wird beim Elternelement vorgenommen.
Auf diese Weise ist es moeglich, beliebig tiefe Menustrukturen zu bilden.

Der erste Eintrag eines Menus definiert jeweils das Aussehen des entsprechenden Menus:

m_df[0][0] = new M_menu (false, "center", 0);

Die weiteren Eintraege definieren jeden einzelnen Menu-Eintrag:

m_df[0][1] = new M_entry ("menu....

Nachstehend eine Beschreibung der Parameter:

Syntax-Diagramme

m_df[0][0] = new M_menu (<menu direction>, <entry alignment>,
                         <space to parent menu>);
m_df[0][1] = new M_entry(<name>, <link>, <target>, <css-style>, <width>,                          <background> <height>, <space to next entry>,
                         <selected background>, <child menu>, <tooltip>);

Parameter	Beschreibung	Wertebereich
menu direction	Definiert, ob die einzelnen Menu-Eintraege des Menus uebereinander oder nebeneinander angezeigt werden sollen.	true = uebereinander false = nebeneinander
entry alignment	Gibt an, wie verschiedengrosse Menueintraege ausgerichtet sein sollen.	'left' = links-buendig 'center' = zentriert 'right' = rechts-buendig
space to parent menu	Abstand des Submenus vom Elternelement (vertikal oder horizontal - je nach 'menu direction'	Pixel
name	Text des Menu-Eintrages, der angezeigt werden soll	String
link	Eine absolute oder relative URL ('Link')	URL
target	Zielfenster oder -Frame, in welchem der Link geoeffnet werden soll.	'_blank' = Neues Fenster '_parent' = uebergeordnetes Frame '_top' = oberstes Frame '_self' = gleiches Frame <name des Fensters>
css-style	Name des CSS-Styles, welcher das Aussehen des Textes definiert des entsprechenden Menu-Eintrages (siehe Kapitel Schrift-Stile).	css-definition
width	Breite des Menu-Eintrages	Pixel
height	Hoehe des Menu-Eintrages	Pixel
space to next entry	Abstand zum naechsten Menu-Eintrag (horizontal oder vertikal je nach 'menu direction')	Pixel
background	Definiert den Hintergrund des Menu-Eintrages. Dies kann eine Farbe oder ein Bild sein.	Farb-definition - bsp.: '#00AA22', 'red' etc. Bild-Adresse - bsp.: 'pic:myfolder/picture.gif'.
selected background	Definiert den Hintergrund, wenn der Menu-Eintrag ueberfahren wird (hervorgehobener Menu-Eintrag).	siehe 'background'
child menu	Nummer des Submenus, welches aufklappen soll beim ueberfahren dieses Menu-Eintrages. Falls kein Submenu vorhanden ist: '-1'	Nummer des Submenus -1 = kein Submenu
tooltip	Kommentar zum Menu-Eintrag, der erscheint, wenn kurze Zeit auf dem Menu-Eintrag mit der Maus verharrt wird.	String (HMTL erlaubt)

Der dritte Bereich beherbergt das Programm und sollte nicht veraendert werden!

:
:
// _______________________________ \/ menu generation \/ ___...
:
:
// ______________p_l_e_a_s_e___d_e_l_e_t_e___t_h_i_s___c_o_m_m_e_n_t___b_o_x...

:
:

Schriftstile

Mit Hilfe der CSS' (CascadingStyleSheets) ist es moeglich, das Aussehen der Menu-Eintraege zu defninieren. Schriftart, Typ, Groesse etc. koennen auf einfache Weise unter einem Namen abgelegt werden, der in der Menudefinition verwendet werden kann, um - falls erwuenscht - jeden Menu-Eintrag separat zu gestalten.

Fuer die im Kapitel Definition und Konfiguration des Menus (Parameter m_showlink) beschrieben Option, Menu-Eintraege ohne Link anders darzustellen, muss jede Style-Definition doppelt vorhanden sein, mit dem Prefix "weak", wobei die Farbe der Schrift heller sein sollte.

Bitte oeffnen Sie das CSS-File in einem Text-Editor, damit sie Ihre Schrift-Style defnieren koennen. Nachstehend sehen Sie ein Beispiel, anhand dessen Sie Ihre eigene Definition machen koennen. Bei Unklarheiten bzgl. CSS, konsultieren Sie bitte auch die Dokumentation 'SELFHTML' von Stefan Muenz.

.title         { color: #2F4751; font: 12px Arial Black; cursor: default;}
.entry         { color: #2F4751; font: 10px Arial;       cursor: default;}
.entry         { color: #222222; font: 12px Impact;      cursor: default;}
.weaktitle     { color: #6F8791; font: 12px Arial Black; cursor: default;}
.weakentry     { color: #6F8791; font: 10px Arial;       cursor: default;}
.weakentry     { color: #666666; font: 12px Impact;      cursor: default;}

Jetzt kanns losgehen!

Sie haben nun alle notwendigen Anpassungen und Menu-Definitionen vorgenommen, damit koennen Sie Ihre Menus jetzt ausprobieren!

Haben Sie Fragen oder gar einen Fehler entdeckt - sind sie zufrieden oder haben Sie Verbesserungsvorschlaege? Wir sind ueber jedes Feedback froh und bemuehen uns, alle Fragen zu beantworten!

Wenn Sie moechten, koennen Sie uns ein oeffentliches Feedback im Gaestebuch oder - persoenlicher - ueber das Feedback-Formular geben. Danke im Voraus!

-> Gaestebuch
-> Feedback-Formular

Uebrigens: Dieses Script ist auf verschiedenen Archiven zu finden - wenn es Ihnen gefaellt, bitte bewerten Sie es:

Weitere Dokumentation

Sehr zu empfehlen ist die Dokumentation 'SELFHTML' von Stefan Muenz. Diese Dokumentation befasst sich sehr ausfuehrlich mit HTML, Javascript, CSS etc. Also genau das richtige fuer Leute, die an weiteren Informationen interessiert sind oder selbst Webpages und Javascript-Programme programmieren wollen.