www.Gerhard-Raabe.de
  JavaScript:
 
JavaScript: Menu 2
 
Copyright: 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.
 
Beispiel:
Next   Beispiel Menu 2
 
Beschreibung: 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 = new Array();
    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 = new Array();
    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 = new Array();
    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 = new Array();
    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 = new Array();
    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 = new Array();
    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 = new Array();
    MenuDeutschland[MenuDeutschland.length] = new CMenuItem("Kiel", "#", "");
    MenuDeutschland[MenuDeutschland.length] = new CMenuSub("Hamburg", MenuHamburg);
    MenuDeutschland[MenuDeutschland.length] = new CMenuItem("Berlin", "#", "");

    MenuLaender = new Array();
    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 = new Array();
    MainMenu[MainMenu.length] = new CMenuMain("MenuLaender", Länder);

    MenuRoot = new CMenuRoot(MainMenu, 20, 20, 149, 18);

    return MenuRoot;
}
 


Beispiel eines HTMl-Files mit Menu und Übersicht:

  <html>
    <head>
         .
         .
         .
       <!-- Menu -->
       <script type="text/javascript" type="menu.js">
       </script>
       <script type="text/javascript">
          <!--
             onLoad = blurMenuLinks;
             document.write(Menu().printMenu());
          -->
       </script>
    </head>
    <body>
         .
         .
         .
       <!-- Overview -->
       <script type="text/javascript">
          <!--
             document.write(Menu().printOverview());
          -->
       </script>
         .
         .
         .
    </body>
</html>
 
 
Download:
Next   Menu 2
385738 Besucher - seit dem 01.02.2005 - 1 Besucher online © 2004-2015 by Gerhard Raabe ##, ## ### #### - ##:##:##