Der nachfolgende Code ist frei verfügbar, solange er nicht kommerziell verwendet wird! Falls er so wie veröffentlicht, in Teilen oder abgewandelt zum Einsatz kommt, würde ich mich sehr über eine kurze E-Mail freuen.
Anwendung:
Objekt-Struktur zum Aufbau einer horizontalen Menuleiste, ähnlich wie sie in Windows-Applicationen üblich ist, für HTML-Seiten. Die Objekte erzeugen automatisiert nach dem Muster von Menu 1 den HTML-Code. Die Kapselung in Objekten bietet folgende Vorteile:
Übersichtlichere und vor allem einfachere Erstellung von Menuleisten
Die Menuleisten können im Code (JavaScript) dynamisch angepaßt werden und
können zentral in einem *.js-File hinterlegt werden, sodaß bei Änderungen oder Erweiterungen nicht jedes einzelne HTML-File angepßt werden muß.
Zusätzlich kann die Menu-Struktur ohne Mehraufwand auf z.B. einer Index-Seite als Baum angezeigt werden.
Die grundsätzlich Arbeitsweise der Menuleiste ist unter Menu 1 beschrieben. An dieser Stelle wird die Kapselung der Menuleiste in eine Objekt-Struktur beschrieben. Diese Objekt-Struktur erzeugt dynamisch den HTML-Code anhand der übergebenen Daten. Dazu werden die vier Objekte:
Objekt
Übergabeparameter
CMenuRoot
Childs
:
Liste der Menupunkte
(CMenuSub, CMenuItem)
XPos
:
Absolute X-Position der Menuleiste
YPos
:
Absolute Y-Position der Menuleiste
Width
:
Breite der Menupunkte
Height
:
Höhe der Menupunkte
CMenuMain
Label
:
Label des Menupunktes
Childs
:
Liste der Menupunkte
(CMenuSub, CMenuItem)
CMenuSub
Label
:
Label des Menupunktes
Childs
:
Liste der Menupunkte
(CMenuSub, CMenuItem)
CMenuItem
Label
:
Label des Menupunktes
Link
:
Link
Target
:
Target
benötigt. CMenuRoot entspricht dabei der gesamten Menuleiste. Es dient als Container für beliebig viele Objekte vom Typ CMenuMain, die die oberste, sichtbare Menuebene representieren. CMenuMain enthält eine beliebige Anzahl von Objekten des Typs CMenuSub bzw. CMenuItem. Hierbei entspricht CMenuItem dem eigentlichen, aufrufbaren Menupunkt. CMenuSub dagegen kann wieder beliebig viele Objekte vom Typ CMenuSub bzw. CMenuItem enthalten und entspricht somit einem Menupunkt, der ein Sub-Menu enthält. Auf diese Weise können Menus beliebig geschachtelt werden. Siehe dazu das unten aufgezeigte Beispiel.
Aussehen und Highlighting der Menupunkte wird über das CSS-File styles.css im Download bestimmt.
Die benötigten JavaScript-Funktionen sind im js-File menu.js (im Download) hinterlegt.
Beispiel-Funktion (z.B. in menu.js) zur Erzeugung einer Menu-Struktur:
function Menu()
{
Menu_1_3_2 = newArray();
Menu_1_3_2[Menu_1_3_2.length] = new CMenuItem("Menu 1-3-2-1", "#", "");
Menu_1_3_2[Menu_1_3_2.length] = new CMenuItem("Menu 1-3-2-2", "#", "");
Menu_1_3_2[Menu_1_3_2.length] = new CMenuItem("Menu 1-3-2-3", "#", "");
Menu_1_3 = newArray();
Menu_1_3[Menu_1_3.length] = new CMenuItem("Menu 1-3-1", "#", "");
Menu_1_3[Menu_1_3.length] = new CMenuSub("Menu 1-3-2", Menu_1_3_2);
Menu_1_3[Menu_1_3.length] = new CMenuItem("Menu 1-3-3", "#", "");
Menu_1_4_2 = newArray();
Menu_1_4_2[Menu_1_4_2.length] = new CMenuItem("Menu 1-4-2-1", "#", "");
Menu_1_4_2[Menu_1_4_2.length] = new CMenuItem("Menu 1-4-2-2", "#", "");
Menu_1_4 = newArray();
Menu_1_4[Menu_1_4.length] = new CMenuItem("Menu 1-4-2-1", "#", "");
Menu_1_4[Menu_1_4.length] = new CMenuSub("Menu 1-4-2-2", Menu_1_4_2);
Menu_1_4[Menu_1_4.length] = new CMenuItem("Menu 1-4-2-3", "#", "");
Menu_1 = newArray();
Menu_1[Menu_1.length] = new CMenuItem("Menu 1-1", "#", "");
Menu_1[Menu_1.length] = new CMenuItem("Menu 1-2", "#", "");
Menu_1[Menu_1.length] = new CMenuSub("Menu 1-3", Menu_1_3);
Menu_1[Menu_1.length] = new CMenuSub("Menu 1-4", Menu_1_4);
Menu_1[Menu_1.length] = new CMenuItem("Menu 1-5", "#", "");
MenuHamburg = newArray();
MenuHamburg[MenuHamburg.length] = new CMenuItem("Rissen", "#", "");
MenuHamburg[MenuHamburg.length] = new CMenuItem("Blankenese", "#", "");
MenuHamburg[MenuHamburg.length] = new CMenuItem("Bahrenfeld", "#", "");
MenuHamburg[MenuHamburg.length] = new CMenuItem("Othmarschen", "#", "");
MenuDeutschland = newArray();
MenuDeutschland[MenuDeutschland.length] = new CMenuItem("Kiel", "#", "");
MenuDeutschland[MenuDeutschland.length] = new CMenuSub("Hamburg", MenuHamburg);
MenuDeutschland[MenuDeutschland.length] = new CMenuItem("Berlin", "#", "");
MenuLaender = newArray();
MenuLaender[MenuLaender.length] = new CMenuItem("England", "#", "");
MenuLaender[MenuLaender.length] = new CMenuSub("Deutschland", MenuDeutschland);
MenuLaender[MenuLaender.length] = new CMenuItem("Niederlande", "#", "");
MenuLaender[MenuLaender.length] = new CMenuItem("Spanien", "#", "");
MainMenu = newArray();
MainMenu[MainMenu.length] = new CMenuMain("MenuLaender", Länder);
MenuRoot = new CMenuRoot(MainMenu, 20, 20, 149, 18);
