Das Auswahlmenü auf der STABsoft-Web-Site wurde mit diesem Javascript erstellt. Das Programm ist Freeware für den privaten Gebrauch. Um dieses Script zu verwenden werden die Zeilen mit den Menüpunkten geändert:
mens[0]="Hauptpunkt 1:Unterpunkt 1.1@alert(\"adr\"):Unterpunkt 1.2@alert(1)";
mens[1]="Hauptpunkt 2:Unterpunkt 2.1@Fe=window.open(\"test.htm\"):Unterpunkt 2.2";
In einem Array mens[] stehen die Menüeinträge mit ihren Unterpunkten, die durch einen Doppelpunkt voneinander getrennt sind. Nach dem Namen eines Unterpunktes steht nach einem Klammeraffen @ ein kurzes Javascript, das nach der Auswahl ausgeführt wird. Um das Menü übersichtlich zu halten, sollte man hier eine anderswo definierte Funktion aufrufen. Der Quellcode für das komplette Menü:
<html><head>
<script language="JavaScript">
<!--
// im Feld mens stehen die Menüpunkte
var mens = new Array();
// Unterpunkte sind durch : getrennt
// nach Unterpunkt-Bezeichnung getrennt durch @ ein Javascript-Befehl
// Hochkomma in Javascript-Befehl hier mit \" eingeben
mens[0]="Hauptpunkt 1:Unterpunkt 1.1@alert(\"adr\"):Unterpunkt 1.2@alert(1)";
mens[1]="Hauptpunkt 2:Unterpunkt 2.1@Fe=window.open(\"test.htm\"):Unterpunkt 2.2";
// klapp = Status des Menüpunktes (expanded=1, collapsed=0)
// soviel Elemente wie bei mens erforderlich
var klapp = new Array(0,0,0,0,0,0,0,0,0,0);
// Menüpunkt erweitern, Kennzeichen setzen und Menü aufbauen
function expd(nr){ klapp[nr]=1;mnulist(); }
// Menüpunkt einklappen, Kennzeichen setzen und Menü aufbauen
function col(nr){ klapp[nr]=0;mnulist(); }
// Maus wird über Menüpunkt bewegt: Farbe ändern
function akt(nr)
{ exp="document.all.td" + nr + ".style.backgroundColor = 'lightblue'";eval(exp); }
// Maus wird aus Menüpunkt bewegt: Farbe zurücksetzen
function deakt(nr)
{ exp="document.all.td" + nr + ".style.backgroundColor = 'yellow'";eval(exp); }
//
function mnulist()
{ txt="<table id='tmenu'>";
l=mens.length;tnr=0;
for (i=0;i<l;i++) {
m=mens[i];
subs=m.split(':');
tnr=tnr+1;
if (klapp[i]==1) { sl=subs.length;
txt=txt + "<tr><td onMouseover='akt(" + tnr
txt=txt + ")' onMouseout='deakt(" + tnr
txt=txt + ")' id='td" + tnr
txt=txt + "' onClick='col(" + i + ")'><img src='minus.gif'> "
txt=txt + subs[0] + "</tr></td>";
for (s=1;s<sl;s++) { tnr=tnr+1;
m=subs[s];t=m.split('@');
txt=txt + "<tr><td onMouseover='akt(" + tnr
txt=txt + ")' onMouseout='deakt(" + tnr
txt=txt + ")' id='td" + tnr
txt=txt + "' onClick='" + t[1] +"' "
txt=txt + ">......." + t[0] + "</tr></td>"; } }
else {
txt=txt + "<tr><td bgcolor=red onMouseover='akt(" + tnr
txt=txt + ")' onMouseout='deakt(" + tnr
txt=txt + ")' id='td" + tnr
txt=txt + "' onClick='expd(" + i + ")' ><img src='plus.gif'> "
txt=txt + subs[0] + "</tr></td>";
}
}
txt=txt + "</table>"
document.all.mnu.innerHTML =txt;
}
// -->
</script>
<style>
<!--
td { font-family: Arial; font-size: 8pt; background-color: 'yellow'; }
-->
</style>
</head><body onLoad=mnulist(); >
<h2>Java-Script-Menü</h2>
<h5>(c)STABsoft KH Offenhäuser</h5>
<p id="mnu">Platzhalter für Menü </p>
</body></html>