Quelltexte zum JS-Menü
aktuelle Entwicklung

Auf dieser Seite werden die JavaScript-Quelltexte des JS-Menüs vorgestellt.
Dabei wurden bis auf den Root-Eintrag sowie einem Ordner und einem Unter-Verzeichniseintrag und den Musterverzeichniseinträgen alle weiteren entfernt, da sie immer dem gleichen Schema folgen.
Die angezeigte Reihenfolge entspricht der Entwicklung, wobei die jeweils neueren Versionen oben stehen.

Was bleibt noch für zukünfige Entwicklungen?
• Ein »Synchronisations-Icon« zum Hervorheben der aktuell angezeigten Datei im JS-Menü.
• Die Synchronisation des seiteFrame mit dem JS-Menü - der jeweils passende Ordner klappt auf.
• Den Roll-over-Effekt für die JS-Menü-Icons.
Das Zurückspringen des Menüs an den Anfang bei Ordner-Aktionen verhindern.
• Versteckfunktion des Menü-Frames, um mehr Platz für die Inhalte zu haben.
Einige der genannten Features erfordern allerdings relativ neue Browser für die Anzeige. Hierbei zeigt sich der Internet-Explorer als der »bessere« Browser.

Aktuelle Anpassungen zu den vorhandenen JS-Menü-Versionen:
Zum Anzeigen des aktuellen Seitentitels gibt es bereits einige Zeilen JavaScript - für den IE only ie only .
Die Befreiung aus fremden Framesets / Frameset per Link nachladen mittels JavaScript.
Rechte Maustaste unterdrücken - im Menü- und Klapp-Frame. Für den, der es braucht.

	Version 1.5 beta 3 - - - Einsatzbeispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="reply to" content="info@js-menue.de"> <meta http-equiv="language" content="de"> <meta name="author" content="Ansgar Federhen, Rhein@Net"> <meta name="publisher" content="Rhein@Net"> <meta name="description" content="Beschreibung meiner Seite"> <meta name="language" content="de"> <meta name="keywords" content="meine Schluesselworte"> <meta name="robots" content="index,follow"> <meta name="revisit-after" content="01 month"> <meta name="copyright" content="Ansgar Federhen, Rhein@Net"> <script language="JavaScript"> <!-- // Urheberrechtshinweis zu diesem Navigationsmenu: // JS-Menue © 1998-2000 Ansgar Federhen/Rhein@Net // http://www.js-menue.de Email:info@js-menue.de // Das Script darf bei Beibehaltung dieses Hinweises // und der Variablen WY frei genutzt werden, die // Verwendung ohne diese Hinweise ist nach Zahlung // einer Lizenzgebuehr moeglich. function ladeDaten(){ mD=new Satz() // Menue-Struktur-Definitionen // Hauptverzeichnis-Eintrag: mD.neu(new HVE("<NAME>","<TEXT>","<ICON>","<STATUSTEXT>")) // Verzeichnis-Eintrag: mD.neu(new VE("<NAME>","<UEBERGEORDNETER NAME>","<TEXT>","<URL>","<ICON ZU>","<ICON OFFEN>","<STATUSTEXT>")) // Link-Eintrag: mD.neu(new LE("<UEBERGEORDNETER NAME>","<TEXT>","<URL>","<ZIEL>","<ICON>","<STATUSTEXT>")) // Weitere Infos in der JS-Menue-Dokumentation. mD.neu(new HVE("root","startseite","","Homepage")) mD.neu(new VE("ord_1","root","Ordner 1","../leer_menu.html","","","")) mD.neu(new LE("doku","Einleitung","../leer_menu.html","","","")) mD.neu(new LE("root","Link-Text über","../leer_menu.html","","","Beispiel für einen Link-Text, der über zwei Zeilen geht")) mD.neu(new LE("root","zwei Zeilen","../leer_menu.html","","leer.gif","Beispiel für einen Link-Text, der über zwei Zeilen geht")) mD.neu(new LE("root","Link ohne Frames","../leer_menu.html","_top","","dieser Link öffnet ein Dokument im kompletten Frameset")) mD.neu(new LE("root","Link in neuem Fenster","../leer_menu.html","_blank","","dieser Link öffnet ein Dokument in einem neuen Browser-Fenster")) } // Menue-Layout-Angaben Layout = "0" // 0=+Icons+Struktur; 1=+OrdnerIcons+Struktur; 2=-Icons+Struktur; 3=-Icons-Struktur; 4=+Icons-Struktur; 5=+OrdnerIcons-Struktur eLayout = " " // Falls Layout ohne Struktur, werden diese Einrueckzeichen verwendet hgStil = "0" // Hintergrundstil: 0=hell bzw. 1=dunkel hgFarbe = "#ffffcc" // Hintergrundfarbe des Menues hgBild = "" // Hintergrundbild des Menues KhgFarbe = "" // Hintergrundfarbe des klappFrame; falls leer, wie Menue KhgBild = "" // Hintergrundbild des klappFrame; falls leer, wie Menue TextFarbe = "#000000" // Farbe von Text ohne hinterlegten Link LinkFarbe = "#0000aa" // Farbe von Text mit hinterlegtem Link aLinkFarbe = "#ff0000" // Farbe des aktiven TextLinks (auch hover-Effekt ab IE 4.x) bLinkFarbe = "" // Farbe der besuchten TextLinks Menubreite = "200" // Breite des menuFrames in Pixel ZielFrame = "seiteFrame" // Name des Frames (nicht der Datei!), in den standardmaessig alle Links geladen werden BildURL = "../_jsm/" // Pfad zu Icons von JS-Menue LinkBild = "globus.gif" // Dateiname des standardmaessig benutzten Icons fuer Links Schrift = "arial,sans-serif" // die fuer das Menue benutzte(n) Schriftart(en) SchriftGr = "1" // Schriftgroesse (1 oder 2) SchriftSt = "0" // Schriftstil: 0=normal, 1=fett, 2=kursiv, 3=fett/kursiv Schliessen = "1" // Ordner schliessen, wenn anderer Ordner geoeffnet wird? (1=ja, 0=nein) AllesZu = "1" // Unterordner schliessen, wenn anderer Unterordner geoeffnet wird? (1=ja, 0=nein) KlapFrame = "1" // klappFrame anzeigen? (1=ja, 0=nein) VerzAuf = "Ordner öffnen" // Standard-Mouseover- und Statuszeilentext bei geschlossenen Ordnern VerzZu = "Ordner schließen" // Standard-Mouseover- und Statuszeilentext bei geoeffneten Ordnern VerzZuLink = "1" // Ordner-Link wird auch beim Schliessen des Ordners geoeffnet (1=ja, 0=nein) KlappAuf = "Alle Ordner auf" // Text, Mouseover- und Statuszeilentext im klappFrame KlappZu = "Alle Ordner zu" // Text, Mouseover- und Statuszeilentext im klappFrame Startseite = "../leer_lade.html" // Dateiname (und Pfad) der Startseite CSS = "" // Dateiname (und Pfad) der StyleSheet-Datei Titel = "Angezeigter Seitentitel" // Name/Titel Deiner Website StatZeile = "" // Standard-Statuszeilentext, falls leer, wie Titel StatURL = "0" // Anzeige der Link-URL(1) oder des Link-Textes(0) bei leerem Link-Statustext prefixHTML = "" // Kopfzeile ueber dem Menue suffixHTML = "Quelle: <a href=\"http://www.js-menue.de\" target=\"_top\"><b>JS-Menü-Homepage</b></a>"; //Fusszeile unter dem Menue // ab hier brauchst Du nichts mehr zu ändern WA=" height=\"16\" align=\"top\"" WB=".gif\" width=\"19\""+WA WC="\" width=\"16\""+WA+" border=\"0\" alt=\"" WD=WB+" border=\"0\" alt=\"" WE=WB+" />" WF=Layout WG="<img src=\""+BildURL WH=!StatZeile?Titel:StatZeile WI="\" onMouseover=\"status='" WJ=SchriftSt WK="'; return true\" onMouseout=\"status='"+WH+"'; return true\">" WL="<a href=\"javascript:parent.a" WM="<style>\nbo"+"dy,p,nobr,b,i,a,font{font-family:"+Schrift+"}\na{text-decoration:none;color:" WN="}\na:hover{color:"+aLinkFarbe+"}\na:active{color:"+aLinkFarbe+"}\n" WO=(!bLinkFarbe?"a:visited{color:"+bLinkFarbe+"}\n":"")+"</style>\n" WP="<link rel=\"stylesheet\" type=\"text/css\" href=\""+CSS+"\">\n" WQ=" link=\""+LinkFarbe+"\" alink=\""+aLinkFarbe+"\""+(!bLinkFarbe?"":" vlink=\""+bLinkFarbe+"\"") WR=">\n<font face=\""+Schrift+"\" size=\""+SchriftGr+"\" color=\""+TextFarbe+"\">\n" WS=(WJ==1\|\|WJ==3?"<b>":"")+(WJ>=2?"<i>":"") WT=(WJ>=2?"</i>":"")+(WJ==1\|\|WJ==3?"</b>":"") WU=!KhgFarbe?hgFarbe:KhgFarbe WV=!KhgBild?hgBild:KhgBild WX=eLayout WY="<ht"+"ml>\n<he"+"ad>\n<!-- \nvon JS-Menue V1.5 beta3 dynamisch erstellter HTML-Code\n© 2000 Ansgar Federhen/Rhein@Net\nWeb:http://www.JS-Menue.de\nE-Mail:Info@JS-Menue.de\n//-"+"->\n" WZ="\n</p></font>\n</bo"+"dy>\n</ht"+"ml>" function start(){ ladeDaten() neumalen()} function neumalen(){ maleMenu() if(KlapFrame==1){ maleKlappFrame()}} function maleMenu(){ if(!CSS){ m=WY+WM+LinkFarbe+WN+WO} else{ m=WY+WP} m+="</he"+"ad>\n<bo"+"dy "+(!hgFarbe?"":"bgcolor=\""+hgFarbe+"\" ")+(!hgBild?"":"background=\""+hgBild+"\"") m+=WQ+WR+prefixHTML+"<p><nobr>"+WS+"\n<a href=\""+Startseite+"\" target=\""+ZielFrame+WI+mD[1].stat+WK if(WF==0\|\|WF==4){ m+=WG+(!mD[1].icon?"globus-"+hgStil+".gif":mD[1].icon)+WC+mD[1].stat+"\" />"} else{ m+=WX} m+=" <b>"+mD[1].text+"</b></a><br />\n" maleVerz(mD[1].name,"") m+=WT+"</nobr>\n"+suffixHTML+WZ mf=frames["menuFrame"].window.document mf.open("text/html") mf.write(m) mf.close() window.defaultStatus=WH} function maleVerz(sE,zE){ var nach=new Satz() for(idx=2;idx<=mD.laenge;idx++){ if(mD[idx].vor==sE){ nach.neu(mD[idx])}} var idx=1 while(idx<=nach.laenge){ m+=zE if(nach[idx].typ=='link'){ w1=StatURL==0?nach[idx].text:nach[idx].url if(WF<3){ m+=(nach[idx].icon=="leer.gif")?WG+((idx!=nach.laenge)?"stamm-":"end")+hgStil+WE:WG+((idx!=nach.laenge)?"zw":"zwe")+hgStil+WE} else{ m+=WX} lstat=!nach[idx].lstat?w1:nach[idx].lstat m+="<a href=\""+nach[idx].url+"\" target=\""+(!nach[idx].ziel?ZielFrame:nach[idx].ziel)+WI+lstat+WK if(WF==0\|\|WF==4){ m+=WG+(!nach[idx].icon?LinkBild:nach[idx].icon)+WC+(!nach[idx].lstat?nach[idx].url:nach[idx].lstat)+"\" />"} m+=" "+nach[idx].text+"</a><br />\n"} else{ if(WF>2){ zweig=WX+zE} else{ zweig=zE} zicon=!nach[idx].zicon?"vzzu-"+hgStil+".gif":nach[idx].zicon oicon=!nach[idx].oicon?"vzauf-"+hgStil+".gif":nach[idx].oicon vza=!nach[idx].vstat?VerzAuf:nach[idx].vstat vzz=!nach[idx].vstat?VerzZu:nach[idx].vstat w1=(nach[idx].offen==0)?1:0 w2=(w1==1)?"zwauf-":"zwzu-" w2+=(idx==nach.laenge)?"e":"" m+=WL+"ufzu('"+nach[idx].name+"',"+w1+")"+WI+(w1==1?vza:vzz)+WK if(WF<3){ m+=WG+w2+hgStil+WD+(w1==1?vza:vzz)+"\">"} else{ m+=WX} if(WF<2\|\|WF>3){ m+=WG+((w1==1)?zicon:oicon)+WC+((w1==1)?vza:vzz)+"\" />"} m+=" "+nach[idx].text+"</a><br />\n" if(w1==0){ if(WF<3){ zweig+=WG+((idx==nach.laenge)?"leer":"stamm-"+hgStil)+WE} maleVerz(nach[idx].name,zweig)}} idx++}} function maleKlappFrame(){ if(!CSS){ k=WY+WM+LinkFarbe+WN+WO} else{ k=WY+WP} k+="</he"+"ad>\n<bo"+"dy "+(!WU?"":"bgcolor=\""+WU+"\"")+(!WV?"":"background=\""+WV+"\"") k+=WQ+WR+"<p>"+WS+"<center> "+WL+"llesaufzu(1)"+WI+KlappAuf+WK if(WF<2\|\|WF>3){ k+=WG+"vzauf-"+hgStil+".gif"+WC+KlappAuf+"\"> "} k+=KlappAuf+"</a><br />\n "+WL+"llesaufzu(0)"+WI+KlappZu+WK if(WF<2\|\|WF>3){ k+=WG+"vzzu-"+hgStil+".gif"+WC+KlappZu+"\" /> "} k+=KlappZu+"</a>\n</center>"+WT+WZ kf=frames["klappFrame"].window.document kf.open("text/html") kf.write(k) kf.close() window.defaultStatus=WH} function aufzu(name,status){ var idx=1 while(mD[idx].name!=name&&mD[idx].url!=name){ idx++} if(mD[idx].url!=""&&(status\|VerzZuLink)){ frames[ZielFrame].location.href=mD[idx].url} if((AllesZu&status)\|\|(Schliessen==1&&mD[idx].vor==mD[1].name)){ for(idx=2;idx<mD.laenge;idx++){ mD[idx].offen=false}} az(name,status) maleMenu()} function az(name,status){ var idx=1 while(mD[idx].name!=name&&mD[idx].url!=name){ idx++} mD[idx].offen=status if(status&&mD[idx].typ!="root"){ az(mD[idx].vor,1)}} function allesaufzu(status){ for(idx=2;idx<mD.laenge;idx++){ mD[idx].offen=status} maleMenu()} function Satz(){ this.laenge=0 this.neu=neu return this} function neu(object){ this.laenge++ this[this.laenge]=object} function HVE(name,text,icon,stat){ this.name=name this.text=text this.icon=icon this.typ="root" this.stat=stat return this} function VE(name,vor,text,url,zicon,oicon,vstat){ this.name=name this.vor=vor this.text=text this.url=url this.zicon=zicon this.oicon=oicon this.typ="verz" this.offen=0 this.vstat=vstat return this} function LE(vor,text,url,ziel,icon,lstat){ this.vor=vor this.text=text this.url=url this.ziel=ziel this.icon=icon this.typ="link" this.lstat=lstat return this} function datum(){ mn=new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember") d=new Date(frames["seiteFrame"].document.lastModified) mo=mn[d.getMonth()] ta=d.getDate() jj=d.getYear() ja=(jj>=2000)?jj:((jj<80)?jj+2000:jj+1900) dat=(ta+". "+mo+" "+ja)} document.write("<ti"+"tle>"+Titel+"<\/ti"+"tle>\n") //--> </script> <noscript> <title>Alternativ Angezeigter Seitentitel</title> </noscript> </head> <script language="JavaScript" type="text/javascript"> <!-- // FrameSet-Definition A: Fuer Browser mit aktivem JavaScript document.write('<frameset frameborder="0" framespacing="0" border="0" onLoad="start()" onResize="neumalen()" cols="'+Menubreite+',">') if(KlapFrame==1){document.write('<frameset frameborder="0" framespacing="0" border="0" rows=",50">')} document.write('<frame name="menuFrame" src="../leer_menu.html" marginwidth="5" marginheight="5" scrolling="auto" />') if(KlapFrame==1){document.write('<frame name="klappFrame" src="../leer_menu.html" marginwidth="0" marginheight="8" scrolling="no" />')} if(KlapFrame==1){document.write('</frameset>')} document.write('<frame name="'+ZielFrame+'" src="'+(location.search?location.search.substring(1):Startseite)+'" marginwidth="8" marginheight="8" scrolling="auto" />') document.write('</frameset>') //--> </script> <noscript> <!-- FrameSet-Definition B: Fuer Browser ohne JavaScript --> <frameset frameborder="0" framespacing="0" border="0" cols="180,*"> <frame name="menuFrame" src="nojsmenu.htm" marginwidth="5" marginheight="5" scrolling="auto" /> <frame name="seiteFrame" src="seite.htm" marginwidth="8" marginheight="8" scrolling="auto" /> </frameset> </noscript> <body bgcolor="#ffffcc" vlink="#0000ff"> <noscript> <noframes> <!-- HTML-Bereich fuer Browser ohne JavaScript und ohne Frames --> </noframes> </noscript> </body> </html>
download original Zip mit allen Dateien und Bildern

Kritik:
Die Datei entspricht nicht dem HTML 4 Standard:
• Zwischen </head> und <body> - also im <html>-Element - dürfen nicht stehen: <noscript>-Elemente, <script>-Elemente.
• Das <title>-Element darf nicht in einem <noscript>-Element stehen.
• Das <frameset>-Element des Frameset B darf nicht in einem <noscript>-Element stehen.
• Die JavaScripts enthalten die »verbotene« Zeichenkette </ - - - richtig wäre: <\/.
Die oben benannten »Standard-Abweichungen« sind ein Tribut an die »Eine-Datei-Lösung« - es ist fraglich, ob es zukünftig nicht eine Mehr-Dateien-Lösung geben wird, um vollständig standardkonform zu sein.
»Altlasten« der Version 1.4.1:
(hier genanntes gilt auch fü die vorhergehenden Versionen)
Strukturbild - wie eine Sackgasse

Mehrzeilige Menüeinträge am Ende eines Verzeichnisses erhalten eine nicht ganz vollendetes Aussehen eines explorerartigen Verzeichnisbaumes (siehe Bild). Effekt ist bekannt aber immer noch nicht behoben.
Sonstiges:
Der <nobr>-Element ist kein Bestandteil der HTML-4-Version. Zwar setzen praktisch alle Browser diesen Tag korrekt um, korrekt ist jedoch der Style white-space : nowrap; zum Verhindern von Zeilenumbrüchen.
Der <font>-Element ist als deprecated bewertet. Zwar ist in der HTML-4-Version Transitional die Verwendung erlaubt, zukunftsicher ist das jedoch nicht.

	Version 1.4.1 - - - Einsatzbeispiel
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> <! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ > <! js-menue, dynamisches strukturiertes menue-system auf javascript-basis > <! © 1998-2000 ansgar federhen/rhein@net (deutsch) + colin tucker (engl.) > <! script darf bei uebernahme des copyrightvermerks frei genutzt werden. > <! ©-hinweis nicht loeschen! scriptverwendung wird sonst lizenzpflichtig! > <! http://rheinbreitbach.net/js-menue/ e-mail:js-menue@rheinbreitbach.net > <! ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ > <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="reply to" content="js-menue@rheinbreitbach.net"> <meta http-equiv="language" content="de"> <meta name="author" content="Ansgar Federhen, Rhein@Net"> <meta name="publisher" content="Rhein@Net"> <meta name="description" content="Beschreibung meiner Seite"> <meta name="language" content="de"> <meta name="keywords" content="meine Schluesselworte"> <meta name="robots" content="INDEX,FOLLOW"> <meta name="revisit-after" content="01 month"> <meta name="copyright" content="Ansgar Federhen, Rhein@Net"> <script language="JavaScript" type="text/javascript"> <!-- function ladeDaten(){ mD=new Satz() // Menue-Struktur-Definitionen: Ab hier wird die Menue-Struktur definiert. Syntax/Schreibweise: // Hauptverzeichnis-Eintrag: mD.neu(new HVE("<name>","<TEXT>","<ICON>","<STATUSTEXT>")) // Verzeichnis-Eintrag: mD.neu(new VE("<NAME>","<UEBERGEORDNETER NAME>","<TEXT>","<URL>","<ICON ZU>","<ICON OFFEN>","<STATUSTEXT>")) // Link-Eintrag: mD.neu(new LE("<UEBERGEORDNETER NAME>","<TEXT>","<URL>","<ZIEL>","<ICON>","<STATUSTEXT>")) // Weitere Infos in der JS-Menue-Dokumentation. mD.neu(new HVE("root","startseite","","Homepage")) mD.neu(new VE("ord_1","root","Ordner 1","../leer_menu.html","","","")) mD.neu(new LE("doku","Einleitung","../leer_menu.html","","","")) mD.neu(new LE("root","Link-Text über","../leer_menu.html","","","Beispiel für einen Link-Text, der über zwei Zeilen geht")) mD.neu(new LE("root","zwei Zeilen","../leer_menu.html","","leer.gif","Beispiel für einen Link-Text, der über zwei Zeilen geht")) mD.neu(new LE("root","Link ohne Frames","../leer_menu.html","_top","","dieser Link öffnet ein Dokument im kompletten Frameset")) mD.neu(new LE("root","Link in neuem Fenster","../leer_menu.html","_blank","","dieser Link öffnet ein Dokument in einem neuen Browser-Fenster")) } // Menue-Layout-Angaben: // ===================== Layout = ""; // reserviert hgStil = "0"; // Hintergrundstil: 0=hell bzw. 1=dunkel hgFarbe = "#FFFFCC"; // Hintergrundfarbe des Menues hgBild = ""; // Hintergrundbild des Menues KhgFarbe = ""; // Hintergrundfarbe des klappFrame; falls leer, wie Menue KhgBild = ""; // Hintergrundbild des klappFrame; falls leer, wie Menue TextFarbe = "#000000"; // Farbe von Text ohne hinterlegten Link LinkFarbe = "#0000AA"; // Farbe von Text mit hinterlegtem Link aLinkFarbe = "#FF0000"; // Farbe des aktiven TextLinks (auch hover-Effekt ab IE 4.x) bLinkFarbe = ""; // Farbe der besuchten TextLinks Menubreite = "180" // Breite des menuFrames in Pixel ZielFrame = "seiteFrame"; // Name des Frames (nicht der Datei!), in den standardmaessig alle Links geladen werden BildURL = "../_jsm/"; // Pfad zu Icons von JS-Menue LinkBild = "globus.gif"; // Dateiname des standardmaessig benutzten Icons fuer Links Schrift = "Arial,sans-serif"; // die fuer das Menue benutzte(n) Schriftart(en) SchriftGr = "1"; // Schriftgroesse (1 oder 2) SchriftSt = "0"; // Schriftstil: 0=normal, 1=fett, 2=kursiv, 3=fett/kursiv Schliessen = "1"; // Ordner schliessen, wenn anderer Ordner geoeffnet wird? (1=ja, 0=nein) AllesZu = "1"; // Unterordner schliessen, wenn anderer Unterordner geoeffnet wird? (1=ja, 0=nein) KlapFrame = "1"; // klappFrame anzeigen? (1=ja, 0=nein) VerzAuf = "Ordner öffnen"; // Standard-Mouseover- und Statuszeilentext bei geschlossenen Ordnern VerzZu = "Ordner schließen"; // Standard-Mouseover- und Statuszeilentext bei geoeffneten Ordnern VerzZuLink = "1" // Ordner-Link wird auch beim Schliessen des Ordners geoeffnet (1=ja, 0=nein) KlappAuf = "Alle Ordner auf"; // Text, Mouseover- und Statuszeilentext im klappFrame KlappZu = "Alle Ordner zu"; // Text, Mouseover- und Statuszeilentext im klappFrame Startseite = "../leer_lade.html" // Dateiname (und Pfad) der Startseite CSS = ""; // Dateiname (und Pfad) der StyleSheet-Datei Titel = "Angezeigter Seitentitel";// Name/Titel Deiner Website StatZeile = ""; // Standard-Statuszeilentext, falls leer, wie Titel StatURL = "0"; // Anzeige der Link-URL(1) oder des Link-Textes(0) bei leerem Link-Statustext prefixHTML = ""; // Kopfzeile ueber dem Menue suffixHTML = "Quelle: <a href=\"http://rheinbreitbach.net/js-menue/\" target=\"_top\"><b>JS-Menü-Homepage</b></A>"; //Fusszeile unter dem Menue // Ab hier brauchst Du normalerweise nichts mehr zu aendern. document.write("<title>"+Titel+"<\/title>\n");StatZeile=(StatZeile=="")?Titel:StatZeile // FrameSet-Definition A: Fuer Browser mit aktivem JavaScript document.write('<frameset frameborder="0" framespacing="0" border="0" onLoad="start()" onResize="neumalen()" COLS="'+Menubreite+',">') if(KlapFrame==1){document.write('<frameset frameborder="0" framespacing="0" border="0" rows=",50">')} document.write('<frame name="menuFrame" src="../leer_menu.html" marginwidth="0" marginheight="0" scrolling="Auto">') if(KlapFrame==1){document.write('<frame name="klappFrame" src="../leer_menu.html" marginwidth="0" marginheight="0" scrolling="No">')} if(KlapFrame==1){document.write('</frameset>')} document.write('<frame name="'+ZielFrame+'" src="'+(location.search?location.search.substring(1):Startseite)+'" marginwidth="8" marginheight="8" scrolling="Auto">') document.write('</frameset>') function start(){ ladeDaten() maleMenu() if(KlapFrame==1){maleKlappFrame()}} function neumalen(){ maleMenu() if(KlapFrame==1){maleKlappFrame()}} WH6="\" width=\"16\" height=\"16\" align=\"TOP\" border=\"0\" alt=\"" WH9=".gif\" width=\"19\" height=\"16\" align=\"TOP\" border=\"0\" alt=\"" WHA=".gif\" width=\"19\" height=\"16\" align=\"TOP\">" BU="<img src=\""+BildURL oMO="\" onMouseOver=\"window.status='" LHg=Layout+hgStil rt="'; return true\" onMouseOut=\"window.status='"+StatZeile+"'; return true\">" jsp="<a href=\"javascript:parent.a" function maleMenu(){ m=frames["menuFrame"].window.document m.open("text/html") m.write("<html>\n<HE"+"AD>\n<!-- \nvon JS-Menue V1.4.1 dynamisch erstellter html-Code\n© 2000 Ansgar Federhen/ Rhei") m.write("n@Net\nWeb: http://rheinbreitbach.net/js-menue/\nE-Mail: js-menue@rheinbreitbach.net\n//-->\n");if(CSS==""){ m.write("<style>\n<!--\nbody,p,nobr,b,i,a,font {font-family:"+Schrift+"}\na{text-decoration:none;color:" + LinkFarbe) m.write("}\na:hover{color:"+aLinkFarbe+"}\na:active{color:"+aLinkFarbe+"}\n") m.write(((bLinkFarbe!="")?"a:visited{color:"+bLinkFarbe+"}\n":"")+"//-->\n</style>\n")}else{ m.write("<link rel=\"stylesheet\" type=\"text/css\" href=\""+CSS+"\">\n")} m.write("</head>\n<body "+((hgFarbe!="")?"bgcolor=\""+hgFarbe+"\" ":"")+((hgBild!="")?"background=\""+hgBild+"\" ":"")) m.write("link=\""+LinkFarbe+"\" Alink=\""+aLinkFarbe+"\""+((bLinkFarbe!="")?" Vlink=\""+bLinkFarbe+"\"":"")) m.write(">\n<font face=\""+Schrift+"\" size="+SchriftGr+" color=\""+TextFarbe+"\">\n"+prefixHTML+"<p><nobr>") m.write(((SchriftSt==1)\|\|(SchriftSt==3)?"<b>":"")+((SchriftSt>=2)?"<i>":"")+"\n<a href=\""+Startseite+"\" target=\""+ZielFrame+oMO) m.write(mD[1].stat+rt+BU+((mD[1].icon=="")?"globus-"+LHg+".gif":mD[1].icon)+WH6+mD[1].stat+"\"> <b>"+mD[1].text+"</b></a><br />\n") maleVerz(mD[1].name,"") m.write(((SchriftSt>=2)?"</i>":"")+(((SchriftSt==1)\|\|(SchriftSt==3))?"</b>":"")+"</nobr>\n"+suffixHTML+"\n</p></font>\n</body>\n</html>") m.close() window.defaultStatus=StatZeile} function maleVerz(sE,zE){ var nach=new Satz() for(idx=1;idx<=mD.laenge;idx++){if((mD[idx].typ!="root")&&(mD[idx].vor==sE)){nach.neu(mD[idx])}} var idx=1 while(idx<=nach.laenge){ m.write(zE) if(nach[idx].typ=='link'){ w1=(StatURL==0)?nach[idx].text:nach[idx].url m.write((nach[idx].icon=="leer.gif")?BU+((idx!=nach.laenge)?"stamm-":"end")+LHg+WHA:BU+((idx!=nach.laenge)?"zw":"zwe")+LHg+WHA) lstat=(nach[idx].lstat=="")?w1:nach[idx].lstat m.write("<a href=\""+nach[idx].url+"\" target=\""+((nach[idx].ziel=="")?ZielFrame:nach[idx].ziel)) m.write(oMO+lstat+rt+BU+((nach[idx].icon=="")?LinkBild:nach[idx].icon)) m.write(WH6+((nach[idx].lstat=="")?nach[idx].url:nach[idx].lstat)+"\"> "+nach[idx].text+"</a><br />\n")} else{ zweig=zE zicon=(nach[idx].zicon=="")?"vzzu-"+LHg+".gif":nach[idx].zicon oicon=(nach[idx].oicon=="")?"vzauf-"+LHg+".gif":nach[idx].oicon vza=(nach[idx].vstat=="")?VerzAuf:nach[idx].vstat vzz=(nach[idx].vstat=="")?VerzZu:nach[idx].vstat w1=(nach[idx].offen==0)?1:0 w2=(w1==1)?"zwauf-":"zwzu-" w2+=(idx==nach.laenge)?"e":"" m.write(jsp+"ufzu('"+nach[idx].name+"',"+w1+")"+oMO+((w1==1)?vza:vzz)+rt+BU+w2+LHg+WH9+vza+"\">"+BU) m.write(((w1==1)?zicon:oicon)+WH6+((w1==1)?vza:vzz)+"\"> "+nach[idx].text+"</a><br />\n") if(w1==0){zweig+=BU+((idx==nach.laenge)?"leer":"stamm-"+LHg)+WHA;maleVerz(nach[idx].name,zweig)}} idx++}} function maleKlappFrame(){ k=frames["klappFrame"].window.document k.open("text/html") khgf=(KhgFarbe=="")?hgFarbe:KhgFarbe khgb=(KhgBild=="")?hgBild:KhgBild k.write("<html>\n<HE"+"AD>\n");if(CSS==""){ k.write("<style>\n<!--\nP{font-family:"+Schrift+"}\na{text-decoration:none;\ncolor:"+LinkFarbe) k.write("}\na:hover{color:"+aLinkFarbe+"}\na:active{color:"+aLinkFarbe+"}\n-->\n</style>\n")}else{ k.write("<link rel=\"stylesheet\" type\"text/css\" href=\""+CSS+"\">\n")} k.write("</head>\n<body "+((khgf!="")?"bgcolor=\""+khgf+"\"":"")+((khgb!="")?"background=\""+khgb+"\"":"")) k.write(" link=\""+LinkFarbe+"\" Alink=\""+khgf+"\">\n<font face=\""+Schrift+"\" size="+SchriftGr+" color=\"") k.write(TextFarbe+"\"><p>\n"+(((SchriftSt==1)\|\|(SchriftSt==3))?"<b>":"")+((SchriftSt>=2)?"<i>":"")) k.write(" "+jsp+"llesaufzu(1)"+oMO+KlappAuf+rt+BU+"vzauf-"+LHg+".gif"+WH6+KlappAuf+"\"> "+KlappAuf+"</a><br />") k.write("\n "+jsp+"llesaufzu(0)"+oMO+KlappZu+rt+BU+"vzzu-"+LHg+".gif"+WH6+KlappZu+"\"> "+KlappZu+"</a>\n") k.write(((SchriftSt>=2)?"</i>":"")+(((SchriftSt==1)\|\|(SchriftSt==3))?"</b>":"")+"</font></p></body>\n</html>\n") k.close() window.defaultStatus=StatZeile} function aufzu(name,status){ for(idx=1;idx<=mD.laenge;idx++){if(((mD[idx].typ=="root")\|\|(mD[idx].typ=="verz"))&&(mD[idx].name==name)){vidx=idx}} if((Schliessen==1)&&(status==1)){ if((AllesZu==1)\|\|(mD[vidx].vor==mD[1].name)){for(idx=1;idx<=mD.laenge;idx++){mD[idx].offen=0}} if((AllesZu==1)&&(mD[vidx].vor!=mD[1].name)){for(idx=1;idx<=mD.laenge;idx++){ if(mD[idx].typ!="link"){if(mD[idx].name==mD[vidx].vor){mD[idx].offen=1 if(mD[idx].vor!=mD[1].name){vvidx=idx;for(idx=1;idx<=mD.laenge;idx++){ if(mD[idx].typ!="link"){if(mD[idx].name==mD[vvidx].vor){mD[idx].offen=1 if(mD[idx].vor!=mD[1].name){vvvidx=idx;for(idx=1;idx<=mD.laenge;idx++){ if(mD[idx].typ!="link"){if(mD[idx].name==mD[vvvidx].vor){mD[idx].offen=1 if(mD[idx].vor!=mD[1].name){vvvvidx=idx;for(idx=1;idx<=mD.laenge;idx++){ if(mD[idx].typ!="link"){if(mD[idx].name==mD[vvvvidx].vor){mD[idx].offen=1} else{alert("zu tiefe Ordnerstruktur, AllesZu auf 0 setzen!");idx=mD.laenge}}}}}}}}}}}}}}}}} mD[vidx].offen=status eval(setTimeout("maleMenu()",50)) if((mD[vidx].url!="")&&((status==1)\|\|(VerzZuLink==1))){frames[ZielFrame].location.href=mD[vidx].url}} function allesaufzu(status){ for(idx=1;idx<mD.laenge;idx++){mD[idx].offen=status} maleMenu()} function Satz(){ this.laenge=0 this.neu=neu return this} function neu(object){ this.laenge++ this[this.laenge]=object} function HVE(name,text,icon,stat){ this.name=name this.text=text this.icon=icon this.typ="root" this.stat=stat return this} function VE(name,vor,text,url,zicon,oicon,vstat){ this.name=name this.vor=vor this.text=text this.url=url this.zicon=zicon this.oicon=oicon this.typ="verz" this.offen=0 this.vstat=vstat return this} function LE(vor,text,url,ziel,icon,lstat){ this.vor=vor this.text=text this.url=url this.ziel=ziel this.icon=icon this.typ="link" this.lstat=lstat return this} function datum(){ mn=new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember") d=new Date(frames["seiteFrame"].document.lastModified) m=mn[d.getMonth()] t=d.getDate() jj=d.getYear() j=(jj>=2000)?jj:((jj<80)?jj+2000:jj+1900) dat=(t+". "+m+" "+j)} //--> </script> <title>Angezeigter Seitentitel</title> </head> <!-- FrameSet-Definition B: Fuer Browser ohne JavaScript --> <frameset frameborder="0" framespacing="0" border="0" cols="180,*"> <frame name="menuFrame" src="nojsmenu.htm" marginwidth="0" marginheight="0" scrolling="Auto"> <frame name="seiteFrame" src="seite.htm" marginwidth="8" marginheight="8" scrolling="Auto"> </frameset> <!-- HTML-Bereich fuer Browser ohne JavaScript und ohne Frames --> <body bgcolor="#ffffcc" vlink="#0000ff"><blockquote> <noframes> <!-- hier Text für Browser ohne JavaScript- und Frame-Unterstützung --> </noframes> </body> </head> </html>
download original Zip mit allen Dateien und Bildern

Kritik:
Die Datei entspricht nicht dem HTML 4 Standard.
• Position des Framesets im <head>-Element. Folge: Neuere Browser haben Probleme mit der Anzeige, da der HTML-Parser in Bezug auf Framesets weniger fehlertolerant ist.
• Doppelte Benamung der Frames (Frameset-Definition A + B).
• Umlaute im Quelltext.
• Das JavaScript enthält die verbotene Zeichenkette </ - - - richtig wäre: <\/.
Weiter:
Es existiert ein Ordnertiefenlimit.
Die Reihenfolge der Link-CSS-Definitionen für a:visited, a:link, a:hover ist falsch.
Eine Reihe kleinerer "Tippfehler" - z.B. beim Hintergrundbild.

Anmerkungen: Die Versionen bis 1.4 sind nicht aufwärtskompatibel, eine Vorstellung ist nicht vorgesehen.

Quelltexte zum JS-Menü aktuelle Entwicklung

Quelltexte zum JS-Menü
aktuelle Entwicklung