Dynamische Menüs mit Javascript

Menüpunkte immer nur als Links darzustellen ist langweilig und unflexibel. Mit Javascript geht das besser: Dynamische Menüs passen sich selbsttätig an. Dieser 2002 in Internet Professionell erschienene Beitrag zeigt, wie Sie solche dynamischen Menüs programmieren.

Javascript und Arrays sind der Weg zu dynamischen Menüs in HTML. Im Folgenden lernen Sie zwei Ansätze kennen, Menüs so aufzubereiten, dass sich Untermenüs abhängig vom gewählten Hauptmenü anpassen.

Die Programme sind für Internet Explorer und Netscape Navigator ab Version 6 entwickelt. Sie sollten auch mit dem älteren Internet Explorer-Versionen ab 5 laufen. Der Netscape Navigator 4.x bleibt außen vor. Mit Opera 6 und dem KDE Konqueror funktionieren die Beispiele einwandfrei. Wichtig: Schalten Sie beim Konqueror die Javascript-Verarbeitung ein.

 

Formularbasierter Ansatz

 

Das erste dynamische Menü basiert auf einem Formular bestehend aus zwei Select-Feldern und einem »Abschicken«-Button. Ein kleines Stylesheet vorab bringt die Felder auf einheitliche Länge:

<html>

<head>

<style type="text/css">

select {width: 150px}

</style>

Ihre Inhalte beziehen die Select-Felder aus einem Array. Dieses ist zweidimensional angelegt. Die Einträge im Array menu[0] enthalten die Auswahlpunkte des Hauptmenüs in menu[0][0], menu[0][1] und so weiter.

Den Hauptmenüpunkten sind über die zweite Schlüsselnummer die Untermenüs zugeordnet. Diese Untermenüs sind in je einem assoziativen Array abgelegt. Zu menu[0][1] gehören die Einträge menu[1][„Auto“], menu[1][„Zug“] und so weiter.

Die Bezeichner im Array-Schlüssel entsprechen den Namen der Untermenü-Punkte wie sie später im Menü erscheinen. Der Inhalt des Array-Eintrags besteht aus einem Wert, der für die weitere Verarbeitung verwendet wird. In diesem Beispiel ist es der Name einer HTML-Datei.

Der Vorteil dieses Array-Modells: es ist einfach zu erweitern. Setzen Sie in menu[0][4] einen weiteren Haupt-Menü-Eintrag und schreiben Sie neue Untermenü-Einträge in ein assoziatives unterhalb von menu[4] … .

 

<script language="Javascript">

menu = new Array();

menu[0] = new Array();

menu[0][0] = "Reisen";

menu[0][1] = "Daheim bleiben";

menu[0][2] = "Arbeiten";

menu[1] = new Array();

menu[1]["Auto"] = "auto.html";

menu[1]["Zug"] = "zug.html";

menu[1]["Flugzeug"] = "flugzeug.html";

menu[2] = new Array();

menu[2]["Fernseher"] = "tv.html";

menu[2]["Radio"] = "radio.html";

menu[3] = new Array();

menu[3]["Schreibtisch"] = "schreibtisch.html";

menu[3]["Computer"] = "computer.html";

Die Funktion haupt_menu initialisiert die Inhalte der Select-Felder. Dabei kommt new Option() zum Einsatz. Die bereitet einen Wert als Option für das Select-Feld auf. Eine temporäre Variable temp_option übernimmt das Ergebnis dieser Umwandlung und übergibt es dem Select-Feld.

 

function haupt_menu(main_array)

{

for (var i=0;i < main_array.length;i++)

{

temp_option = new Option(main_array[i]);

document.menu.haupt_menu.options[i] = temp_option;

}

}

 

Die nächste Funktion ist für die Untermenüs zuständig. Eine Schleife nimmt die Unterpunkte aus dem assoziativen Array und übergibt sie dem zweiten Select-Feld. Der Zähler i hilft, die Unterpunkte der Reihe nach im Menü zu positionieren.

 

function sub_menu(sub_array)

{

// Hilfszähler initialisieren, da assoziatives Array

i = 0;

for (var text in sub_array)

{

temp_option = new Option(text, sub_array[text]);

document.menu.sub_menu.options[i] = temp_option;

i++;

}

}

Die Funktion rebuild_menu startet, sobald ein neuer Eintrag im Hauptmenü gewählt wird. Zunächst wird das Select-Feld mit dem Untermenü geleert, indem die Funktion die Eigenschaft .length auf 0 setzt. Danach startet die Funktion sub_menu() für das Untermenü.

 

function rebuild_menu(menindex)

{

// leeren

document.menu.sub_menu.length = 0;

 

// neu schreiben

sub_menu(menu[menindex]);

 

}

</script>

Um das Programm zu nutzen, brauchen Sie noch Select-Felder. Die werden im folgenden Code angelegt. Im ersten Select-Feld ist die Aktion OnChange definiert. Sprich: Ändert sich die Auswahl im ersten Select-Menü, startet die Funktion rebuild_menu(). Abschließend initialisieren zwei Funktionsaufrufe das Haupt- und das Untermenü. Achten Sie darauf, dass sub_menu-Aufruf auch das zu haupt_menu passende Untermenü einbindet.

 

<title>Dynamische Menüs mit Javascript: SELECT</title>

</head>

<body>

<h2>Dynamische Menüs mit Javascript: SELECT</h2>

<form name="menu">

<select size=1 name="haupt_menu" onChange="javascript:rebuild_menu(document.menu.haupt_menu.selectedIndex + 1)">

</select>

<select size=1 name="sub_menu">

</select>

<input type=submit value="Auswahl bestätigen">

</form>

<script language="Javascript">

haupt_menu(menu[0]);

sub_menu(menu[1]);

</script>

</body>

</html>

 

Fertig: Damit haben Sie ein Platz sparendes und praktisches Menü. Probieren Sie es aus. Sobald Sie einen Haupt- und einen Untermenü-Punkt gewählt haben, klicken Sie auf Auswahl bestätigen. Das ruft die Seite mit den Variablen haupt_menu und sub_menu und den entsprechenden Werten auf. Das kann freilich nur als Beispiel dienen. Um das Programm für Ihren Bedarf einzusetzen, ändern Sie den Parameter action im Form-Tag.

 

Grafisches Menüsystem

 

Der zweite Ansatz ist weit ausführlicher. Das Menüsystem färbt den jeweils aktiven Eintrag im Hauptmenü. Dazu zeigt es das passende Untermenü. Ein zusätzlich eingebautes Textfeld informiert zum jeweils aktiven Menüpunkt.

Los geht es mit einer Reihe von Variablen und Arrays. top_index enthält immer das jeweils aktive Hauptmenü. Das wird in einigen Funktionen gebraucht. Danach lädt Javascript eine 1 x 1 Pixel große Füllgrafik in fuell.src. Das Bild muss als transparente GIF-Datei vorliegen.

In diesem Programm kommen mehrere Arrays parallel zum Einsatz. Die Schlüsselnummern der Einträge müssen immer zusammen passen, zu haupt_menu[1] gehören also haupt_grau_bild[1] sowie haupt_farb_bild[1].

Die Schlüsselnummern vergibt new Array() automatisch. haupt_menu = new Array(„Reisen“, „Daheim bleiben“, „Arbeiten“); erzeugt diesen Array:

haupt_menu[0] = „Reisen“;

haupt_menu[1] = „Daheim bleiben“;

haupt_menu[2] = „Arbeiten“;

 

Dem Hauptmenü sind zweidimensionale Untermenüs zugeordnet. Zu haupt_menu[1] gehören die Einträge unterhalb von submenu[1]. Auch die Untermenüs bestehen aus mehreren Arrays: zu sub_menu[1][0] gehört wiederum sub_grau_bild[1][0].

<script language="Javascript">

// Arrays und globale Variablen

// Globale Variable für das aktuell gewählte Hauptmenü

var top_index;

fuell = new Image();

fuell.src = "trans.gif";

haupt_menu = new Array("Reisen", "Daheim bleiben", "Arbeiten");

haupt_grau_bild = new Array("reisen_gr.jpg", "daheim_gr.jpg", "arbeiten_gr.jpg");

haupt_farb_bild = new Array("reisen.jpg", "daheim.jpg", "arbeiten.jpg");

sub_menu = new Array();

sub_menu[0] = new Array("Auto", "Zug", "Flugzeug");

sub_menu[1] = new Array("Fernseher", "Radio");

sub_menu[2] = new Array("Schreibtisch", "Computer");

sub_grau_bild = new Array();

sub_grau_bild[0] = new Array("auto_gr.jpg", "zug_gr.jpg", "flugzeug_gr.jpg");

sub_grau_bild[1] = new Array("fernseher_gr.jpg", "radio_gr.jpg");

sub_grau_bild[2] = new Array("schreibtisch_gr.jpg", "computer_gr.jpg");

Die erste Funktion des Programms heißt bilder(). Sie nimmt aus dem ihr übergebenen Array die gespeicherten Dateinamen und sichert sie in der Variablen temp_name. Anschließend wandelt die Funktion den Array-Eintrag selbst mit new Image() in ein Bild um. Der .src-Eigenschaft des neuen Bild-Objekts wird dann der Dateiname aus temp_name übergeben. Damit lädt Javascript das Bild in den Browser-Speicher.

 

function bilder(bild_array_name)

{

for (var i=0; i < bild_array_name.length; i++)

{

temp_name = bild_array_name[i];

bild_array_name[i] = new Image();

bild_array_name[i].src = temp_name;

}

}




call_sub ist Kernstück des Programms. Die Funktion färbt die Hauptmenü-Punkte ein und ruft die zugehörigen Untermenüs auf. Dabei ersetzt sie zunächst den aktuell farbigen Hauptmenüpunkt mit der grauen Version der Grafik. Dieser Menüpunkt ist damit abgewählt. Anschließend erhält der aktuell angeklickte Auswahlpunkt seine Färbung. Das Informationsfenster document.kasten.info zeigt einen kurzen Text zum gerade gewählten Menüpunkt.

Die viel benutzte Funktion eval() erlaubt, Programmbefehle dynamisch zu erzeugen. Der erste eval()-Befehl setzt aus dem Namen TopMenu und der Schlüsselnummer des Array-Eintrages den Namen jedes <img>-Tags zusammen. Das sind TopMenu0, TopMenu1 und so weiter. Danach weist eval(), diesen Namen die grauen Bilddaten zu. Das ergrauende Bild wird anhand der Variablen old_hauptmenu_index ermittelt. Danach bekommt das angeklickte Bild seine Farbe, und die Funktion show_submenu() erhält den Startbefehl zum Zeichnen des Untermenüs. Abschließend landet die Nummer des aktuell gefärbten Bildes in old_hauptmenu_index.

 

function call_sub(index)

{

// Globale Variable top_index setzen

top_index = index;

 

eval("document.TopMenu"+old_hauptmenu_index+".src = src=haupt_grau_bild["+old_hauptmenu_index+"].src");

eval("document.TopMenu"+index+".src = src=haupt_farb_bild["+index+"].src");

document.kasten.info.value = "Sie haben den Menüpunkt " + haupt_menu[index] + " gewählt.";

show_submenu(index);

old_hauptmenu_index = index;

}

Die Funktion init_submenu() bereitet die Untermenüs vor. Im Wesentlichen schreibt sie Image-Tags für die Untermenüs. Allerdings ist das nicht ganz so einfach. Denn die Untermenüs können unterschiedliche Länge haben. Damit nichts durcheinander kommt, ermittelt init_submenu() zunächst in einer Schleife das längste Untermenü. Danach setzt die Funktion die Variable top_index, die für das aktuell gewählte Hauptmenü steht. Wieder folgen eval()-Aufrufe, um den beim Funktionsaufruf gewählten Hauptmenüpunkt einzufärben. Weiter merkt sich das Programm die Länge des jetzt darzustellenden Untermenüs in old_submenu_length. Diese Angabe braucht die Funktion show_submenu() zum Löschen der Einträge vor dem Aufbau eines neuen Untermenüs.

 

function init_submenu(index)

{

// Variablen für die Länge

max_length = 0;

 

// Maximal notwendige Menülänge ermitteln

for (i = 0; i < sub_menu.length; i++)

{

if (sub_menu[i].length > max_length)

{

max_length = sub_menu[i].length;

}

}

 

 

// Topindex global setzen

top_index = index;

// Menüpunkt einfärben

eval("document.TopMenu"+index+".src=haupt_farb_bild["+index+"].src");

 

// Um später den eben gefärbten Menüpunkt löschen zu können

old_hauptmenu_index = index;

 

// Um das Untermenü wieder löschen zu können

old_submenu_length = sub_menu[index].length;

Der zweite Teil der Funktion init_submenu() baut eine einfache Tabelle auf. In der ersten Spalte stehen die Grafiken für das Untermenü. Hier entscheidet eine if-Anweisung anhand der tatsächlichen Länge des sub_menu-Arrays, wie viele Grafiken gezeichnet werden. Ist das Array kürzer als das zuvor ermittelte längste Untermenü, füllt das Programm die restlichen Image-Tags mit leeren, transparenten Ein-Pixel-GIFs.

Die eval()-Anweisungen haben eine Besonderheit: Vor einigen Anführungszeichen steht der Backslash . Der sorgt dafür, dass die Anführungszeichen nicht als Bestandteil des eval()-Funktionsaufrufs gelten, sondern mit in das Ergebnis geschrieben werden.

Bleibt noch die zweite Spalte der Tabelle: Hier steht ein Formular mit dem Infofenster.

 

// Das Ganze in eine Tabelle packen

document.write("<table><tr><td valign=top>");

 

// Erstes Untermenü schreiben

for (var i=0; i < max_length; i++)

{

document.write ("<img name=SubMenu" + i + " onClick="javascript:auswertung(" + i + ")"><br>");

if (i < sub_menu[index].length)

{

eval("document.SubMenu"+i+".src=sub_grau_bild["+index+"]["+i+"].src");

}

else

{

eval("document.SubMenu"+i+".src=fuell.src");

}

}

document.write("</td><td valign=top><form name=kasten>");

document.write("<textarea name=info rows=4 cols=25 wrap=soft></textarea></form></td></tr></table>");

document.kasten.info.value="Hallo";

}

Bald ist es geschafft. Die Funktion show_submenu löscht zuerst das alte Untermenü, indem jeder Grafik den Füller fuell.src zuweist. Danach ist Platz für das neue Menü.

 

function show_submenu(haupt_index)

{

// Altes Menü löschen

for (var i=0; i < old_submenu_length; i++)

{

eval("document.SubMenu"+i+".src=fuell.src");

}

 

// Neues Menü für nächstes Löschen merken

old_submenu_length = sub_menu[haupt_index].length;

 

// Neues Menü schreiben

for (var i=0; i < sub_menu[haupt_index].length; i++)

{

eval("document.SubMenu"+i+".src=sub_grau_bild["+haupt_index+"]["+i+"].src");

}

}

Den Abschluss in der Funktionssammlung bildet auswertung().Anhand des in sub_menu[top_index][sub_index] stehenden Wertes können Sie andere Seiten aufrufen, Programme mit Parametern füttern oder wie in diesem Beispiel einen simplen Informationstext ausgeben.

 

function auswertung(sub_index)

{

document.kasten.info.value = "Option " + sub_menu[top_index][sub_index] + " gewählt.";

// ... weiterer Code ...

}

Bleiben das Hauptprogramm und der HTML-Quelltext. Das Hauptprogramm ruft zuerst die Funktion bilder() auf, holt also alle Bilder in den Browser-Speicher. Dieses Vorab-Laden fordert grafische Disziplin: Achten Sie darauf, die Menü-Grafiken kompakt zu halten. Weiter unten finden sich im HTML-Code eingebettet der Code zum Schreiben des Hauptmenüs und der Funktionsaufruf für das erste Untermenü. Als Funktionsparameter geben Sie den Hauptmenüpunkt an.

 

// Hauptprogramm

// Hauptmenu initialisieren

bilder(haupt_farb_bild);

bilder(haupt_grau_bild);

// Alle anderen Bilder in Schleife initialisieren

for (var zaehl_array=0; zaehl_array < haupt_menu.length; zaehl_array++)

{

bilder(sub_grau_bild[zaehl_array]);

}

</script>

<title>Dynamische Menüs mit Javascript: Bilder</title>

</head>

<body>

<h2>Dynamische Menüs mit Javascript: Bilder</h2>

<script language="JavaScript">

for (var index=0; index < haupt_menu.length; index++)

{

document.write ("<img name=TopMenu" + index + " onClick="javascript:call_sub(" + index + ")" src="+haupt_grau_bild[index].src+">");

}

document.write("<br><br><br>");

// Erstes Untermenü aufbauen

init_submenu(1);

</script>

</body>

</html>

 

 

So geht es weiter

 

In den Beispieldateien in der rechten Spalte auf dieser Seite unter Dateien finden Sie Code und Grafiken dieser Programmbeispiele. Experimentieren Sie damit, machen Sie sich mit der eval-Anweisung und den Arrays vertraut.

Beispielsweise könnten Sie zusätzlich die Untermenüpunkte einfärben, sobald diese angeklickt werden — die zugehörigen Grafiken liegen mit im Verzeichnis. Sie tragen den Namen ihrer grauen Pendants, nur fehlt das _gr am Schluss. Oder sie erweitern die Arrays nach eigenem Gutdünken und nutzen das Programmbeispiel als Gerüst für eigene Menüstrukturen.

Ähnliche Beiträge