Dieses Menü funktioniert mit dem Internet Explorer V4 oder höher und mit Netscape ab V6. Nur etwa 30 Zeilen Code sind notwendig (ohne die Menüdefinitionen)!
Das Javascript erzeugt 5 Menüs mit jeweils 5 Untermenüs. Beim Überfahren eines Hauptmenüs wird das entsprechende Untermenü geöffnet. Jedes Menü und Untermenü hat eine festgelegte Breite von 100 bzw. 135 Pixeln. Ein Untermenü wird geschlossen, sobald irgendwo im Fenster geklickt wird. Im <body> Tag muß der Event-Handler onclick eingebaut werden, z.B: <body onclick="hidemenue();"> , damit ein Menü auch wieder geschlossen wird. Das Script selbst wird im Body eingebunden. Je nachdem, wo es dort plaziert wird, erscheint dort die Menüleiste. Breite und Farben können angepaßt werden. Dazu ändert man die CSS-Eigenschaften im Script.
Die Menüs werden innerhalb des Scripts definiert:
// DHTML Menu for MSIE und NS6
// Author Oliver Kertesz
// Created OCT/2000
var hmenu=new Array();
var umenu=new Array();
// Hier die Menüs
new hauptmenue("Schach");
new untermenue("Schach","Lichtental","http://home.t-online.de/home/sfbali/");
new untermenue("Schach","Baden-Oos","http://www.zugzwang.de");
new untermenue("Schach","Kuppenheim","http://www.rochadekuppenheim.de");
new untermenue("Schach","schach.com","http://www.schach.com");
new untermenue("Schach","chessopolis","http://www.chessopolis.com");
new hauptmenue("Search");
new untermenue("Search","Yahoo","http://www.yahoo.de");
new untermenue("Search","Lycos","http://www.lycos.com");
new untermenue("Search","Google","http://www.google.com");
new untermenue("Search","Hotbot","http://hotbot.lycos.com");
new untermenue("Search","Metasuche","http://www.metacrawler.de");
new hauptmenue("Internet");
new untermenue("Internet","Kostenlos","http://kostenlos.de");
new untermenue("Internet","T-online","http://www.t-online.de");
new untermenue("Internet","Web.de","http://web.de");
new untermenue("Internet","CEXX","http://cexx.org");
new untermenue("Internet","kein Link","");
new hauptmenue("Astro");
new untermenue("Astro","Nasa","http://nasa.gov");
new untermenue("Astro","Astronomie","http://www.astronomie.de");
new untermenue("Astro","Astrologie","http://www.astrologie.de");
new untermenue("Astro","Space Shuttle","http://www.nasm.edu/ceps/rpif/SSPRarchive.html");
new untermenue("Astro","The 9 Planets","http://www.seds.org");
new hauptmenue("Sonstiges");
new untermenue("Sonstiges","Edward Elgar","http://www.elgar.org");
new untermenue("Sonstiges","D-S-C-H","http://www.shostakovich.org");
new untermenue("Sonstiges","Säurebad","http://www.saeurebad.de");
new untermenue("Sonstiges","Autsch","http://www.autsch.de");
new untermenue("Sonstiges","Dirty Harry","http://www.schmidt.de");
// Menüs erzeugen
menu_create();
function hauptmenue(hname){
this.hname=hname;
hdazu(this);
}
function hdazu(objekt){
hmenu[hmenu.length]=objekt;
}
function udazu(objekt){
umenu[umenu.length]=objekt;
}
function untermenue(von,uname,urlm){
this.von=von;
this.uname=uname;
this.jumpto=urlm;
udazu(this);
}
function menu_create(){
var lpos=-100;
for (var i=0; i<hmenu.length; i++){
document.write("<div style=\"position: absolute; left: "+(lpos+=100)+"px; text-align: center; z-index: 1; background: #CCDDEE; width: 135px; padding: 3px; cursor: pointer; cursor: hand\" id=\""+ hmenu[i].hname + "\" onClick=\"hidemenue();\" onMouseover=\"showmenue('_"+hmenu[i].hname + "');\">" + hmenu[i].hname + "</div>");
document.write("<div style=\"position: absolute; left: "+(lpos)+"px; z-index: 2; border: 2px solid blue; text-align: center; width: 135px; margin-top: 22px; visibility: hidden; overflow: hidden; background: #BBCCDD; color: blue; padding: 4px;\" id=\"_" + hmenu[i].hname + "\" onClick=\"hidemenue();\">");
for (var j=0; j<umenu.length; j++){
if (umenu[j].von==hmenu[i].hname){
document.write("<a href='" + umenu[j].jumpto + "'>" + umenu[j].uname + "</a><br>");
}
}
document.write("</div>");
}
}
function showmenue(dasda){
for (var i=0; i<hmenu.length; i++)
document.getElementById("_"+hmenu[i].hname).style.visibility="hidden";
document.getElementById(dasda).style.visibility="visible";
}
function hidemenue(){ // NS + MSIE
for (var i=0; i<hmenu.length; i++)
document.getElementById("_"+hmenu[i].hname).style.visibility="hidden";
}
// end script