oder verwendet wird, // ist letztlich egal. Die Darstellung von -Elementen ohne href wird von den Browsern // nicht einheitlich gehandhabt und die Stylesheet-Spezifikationen kommen daher auch nicht // immer voll zum Zuge. Es empfiehlt sich, anstelle der Hover-Angaben für Links eine // zweite Class zu definieren. // // B) Initialisierung // An geeigneter Stelle (z.B. OnLoad) sollte dieses JavaScript aufgerufen werden, z.B so: // // // // Dabei ist // 'klappmenu' die Id der Menu-DIV (vgl 1.A) // 'menu' der generische Class-Name (vgl 1.B) // Hier könnten auch zwei Namen angegeben werden, z.B. "menu1,menu2" // Der erste gilt für den Normalfall, der zweite für Einträge, die // aktiv sind (Maus drüber oder Teil des aktuellen Pfades) // 'pfeil.gif' die Referenz auf einen Fortsetzungspfeil. Dieser wird rechts in einem // Menüeintrag eingeblendet, wenn der Eintrag weitere Unter-Einträge hat. // Dieses Argument kann auch leer sein ('') // ich mach das hier so: // wenn das nicht durch die "seite_wird_updated"-Variable verhindert wird, // rufen wir ON LOAD die Funktion klappmenu_start() auf, die die Initialisierung erledigt. var seite_wird_updated ; // // 3. Hintergrund: // // Bei der Initialisierung liest das JavaScript das ganze Menü durch und verändert an jedem // Menü-Eintrag dreierlei: // - die vertikale Position wird neu berechnet // - die Anzeige untergeordneter Menü-Einträge wird unterdrückt // - der Eintrag erhält einen Event-Handler zugewiesen, der bei MouseOver und MouseOut die neuen // Anzeigeverhältnisse herstellt. // // Bonus-Track: // Mit dem Aufruf "klappswitch('xxx')" kann das Menü sein Aussehen schlagartig ändern, // wenn mit dem generischen Namen 'xxx' (also z.B. als stufe1, stufe2 etc) ein weiteres // Set von CSS-Classen bereit steht. Dasselbe Menü kann so auf verschiedene Arten // dargestellt werden. // Auch hier können zwei Sets von Klassen angegeben werden, einer für den Normalfall und // einer für aktive Menü-Einträge. // // 4. Juni 2004 - Andreas Fischer // ******************************************************************************************** // ******************************************************************************************** // einige global verfügbare Variablen // var lvl = new Array() ; // assoziative Arrays, aus denen für den Eintrag var vpos = new Array() ; // "n.n.n." der Level und die vertikale Position var mhoehe = new Array() ; // errechnete Höhe jedes Menü-Eintrags // ersichtlich sind. var mpfad = new Array(0,0,0,0,0,0,0,0,0,0) ; // wird beim Aufbau der Pfad-Nummerierung gebraucht var genam1 = "" ; // hält den generischen Class-Namen zur Verfügung var genam2 = "" ; // dasselbe für den aktivierten Status (Mouseover) var mename = "" ; // hält den Namen der MenüDiv zur Verfügung var idsep = "-" ; // Separatorzeichen für die Id (z.B. 1-, 1-1-, 1-2-1-) var offpend = false ; // Zwei Variablen zum Handling des Ausblendens var pendent = null ; // wenn der Mauspfeil wegbewegt wird var vkorr = new Array(0,0,0,10,17) ; // vertikale Korrektur für die Menülevels var bkorr = new Array() ; // Breite-Korrekturen var debug = (window.location.search.indexOf("debug") > 0) ; // ******************************************************************************************** function klappmenu(mname,gname,higrubi,hoehe) { // für den Aufruf dieser Funktion geben wir folgende Argumente an: // - die Id des ganzen Menus // - den generischen Class-Namen der Menü-Einträge, also z.B. "stufe" für "stufe1", "stufe2" u.s.w. // Hier können - getrennt mit Kommas - auch zwei Klassen angegeben werden. Dann wird die zweite // Klasse bei MouseOver verwendet, und so lange das Item Teil des aktiven Menus ist. // - die zu verwendende "src"-Angabe für den Fortsetzungspfeil // - eine oder mehrere Menü-Höhen // Zuerst übernehmen wir aus den Argumenten, was so anfällt: var kpos = gname.indexOf(',') ; // Komma-Position bestimmen if(kpos > 0) { // wenn's eines hat, genam1 = gname.substr(0,kpos) ; // bewahren wir die beiden Klassen genam2 = gname.substr(++kpos) ; // getrennt auf, } // im andern Fall else genam1 = gname ; // halt eben nur die erste. mename = mname ; // den brauchen wir andernorts wieder // finden wir uns in diesem Menü? are_we = "" ; we_are = location.href.substr(location.href.lastIndexOf("/")+1) ; // Nun positionieren wir uns auf das Menü. var ganzesmenu = document.getElementById(mename) ; // Das haben wir gefunden. /* Wir gehen nun alle Links durch und bestimmen ihre vertikalen Positionen. */ /* Daraus können wir dann ihre jeweilige Höhe berechnen. */ /* Natürlich interessieren uns nur Links, deren Name mit [gname] anfängt. */ aktv = absv(ganzesmenu) ; /* Zu Beginn stehen wir auf Höhe 0 */ prev_id = "" ; /* und kennen noch keine Vorgänger-Id. */ gnl = genam1.length ; /* Länge des generischen Namens */ for(i=0 ; i< ganzesmenu.childNodes.length ; i++) { /* alle Kinder (= Links) durchsuchen */ dieseskind = ganzesmenu.childNodes[i] ; /* nächsten Link aufsuchen */ if(dieseskind.className) { /* hat der überhaupt eine Class? */ if(dieseskind.className.substr(0,gnl) == genam1) { /* falls ja, ist es eine der unsrigen? */ dieserlevel = dieseskind.className.substr(gnl,1) ; /* falls ja, enthält sie den Level. */ menupfad = "i" ; /* Wir setzen den Identifier zusammen: */ mpfad[dieserlevel]++ ; /* auf unserer Stufe eins dazuzählen */ for(mi=1 ; mi <= 9 ; mi++) { /* alle Stufen durchgehen */ if(mi <= dieserlevel) menupfad += mpfad[mi] + idsep ; /* "unsere" zusammenhängen */ else mpfad[mi] = 0 ; /* die darüberliegenden auf 0 stellen */ } dieseskind.id = menupfad ; /* unser Eintrag kriegt ne Id */ lvl[menupfad] = dieserlevel ; /* und wir merken uns seinen Level */ dieseskind.style.display = "block" ; /* und wir stellen seine Anzeige sicher */ if(dieseskind.href.substr(dieseskind.href.lastIndexOf("/")+1) == we_are) { are_we = menupfad ; // und ob es das aktuelle ist. } if(debug) debug = confirm("wir verarbeiten Menu " + menupfad + "\n(" + dieseskind.firstChild.nodeValue + ")") ; vertikale_position = absv(dieseskind) ; /* wir ermitteln die aktuelle Position. */ if(prev_id != "") { /* wenn wir nicht ganz am Anfang sind, */ mhoehe[prev_id] = vertikale_position - aktv ; /* können wir die Höhe des vorhergegangenen */ /* Elements berechnen und speichern. */ if(debug) debug = confirm("Nachdem wir nun auf der Position " + vertikale_position + " sind" + "\nund vorher auf der Position " + aktv + " waren," + "\nhat das vorangegangene Element \"" + prev_id + "\"" + "\noffensichtlich die Höhe " + mhoehe[prev_id] + "px.") ; } mhoehe[menupfad] = 0 ; /* wird vom nächsten Element korrigiert */ prev_id = menupfad ; aktv = vertikale_position ; } } } /* So: Jetzt hat jedes Element eine eindeutige Id, die auch die Menüstruktur widerspiegelt. */ /* Ausserdem ist in jedem Element (ausser im allerletzten) auch noch die Höhe des Elements gespeichert, */ /* was wir im Folgenden für die Neuberechnung der Positionen brauchen. */ /* Wir starten nun zum zweiten Loop: Diesmal geht's nicht ums Berechnen, sondern ums Positionieren. */ debug = (window.location.search.indexOf("debug") > 0) ; ganzesmenu = document.getElementById(mename) ; /* wieder von vorn anfangen */ vorherlevel = 0 ; /* jetzt machen wir Level-Vergleiche */ for(i=0 ; i< ganzesmenu.childNodes.length ; i++) { /* alle Kinder (= Links) durchsuchen */ dieseskind = ganzesmenu.childNodes[i] ; /* nächsten Link aufsuchen */ if(dieseskind.className) { /* hat der überhaupt eine Class? */ if(dieseskind.className.substr(0,gnl) == genam1) { /* falls ja, ist es eine der unsrigen? */ dieserlevel = dieseskind.className.substr(gnl,1) ; /* falls ja, enthält sie den Level. */ menupfad = dieseskind.id ; /* die haben wir ja oben zusammengestellt */ if(debug) debug = confirm("Wir positionieren das Menü " + menupfad) ; // Falls dieses Item jemals erscheint - wo wird es dann angezeigt? // Nun, das hängt von seinem Level ab: // - hat es einen höheren Level als das vorangegangene Item, dann ist es das erste in // einem neuen Unterlevel und hat daher die selbe Höhe (steht einfach weiter rechts). // Wobei wir allerdings beim allerersten Item eine Sonderbehandlung machen müssen. // - andernfalls gehen wir vom letzten bekannten Item des selben Levels aus // und positionieren das neue Item darunter. if(dieserlevel > vorherlevel) { /* neues Menu aufklappen */ if(vorherlevel == 0) { /* das allererste Item! */ vpos[menupfad] = 30 ; /* ... hat eine fixe Position */ } else { /* Wir haben einen neuen Unterlevel aufgeklappt. */ /* Dessen erstes Menu erscheint auf der selben Höhe wie das übergeordnete Menü. */ uebergeordnet = " " + menupfad.substr(0,menupfad.length-1) ; /* bis zum vorletzten */ uebergeordnet = menupfad.substr(0,uebergeordnet.lastIndexOf(idsep)) ; /* Separator */ vpos[menupfad] = vpos[uebergeordnet] + vkorr[dieserlevel] ; if(debug) debug = confirm(menupfad + " ist ein neuer Unterlevel zu " + uebergeordnet + " und erhält dessen vertikale Position " + vpos[menupfad]) ; } } else { // wir bleiben im selben Menu oder gehen sogar einen Level zurück. /* wir bleiben im selben Level. Für die vertikale Position suchen wir zunächst das vorhergehende Element */ /* dieses Levels: die letzte Zahl im Index um eins reduzieren */ workpath = menupfad.substr(0,menupfad.length-1) ; /* Pfad ohne den "dangling" Separator */ ppos = workpath.lastIndexOf(idsep) ; /* Position des letzten Separators */ if(ppos < 0) { /* es hat gar keinen mehr ... */ workpath = parseInt(workpath.substr(1)) ; /* -> dann sind wir im Toplevel */ workpath = "i" + --workpath + idsep ; /* und können den Vorgänger konstruieren */ } else { /* Wenn wir aber einen qualifizierten haben, */ vorh = workpath.substr(ppos+1) ; /* -> dann nehmen wir den letzten Qualifier, */ vorh-- ; /* reduzieren ihn um eins */ workpath = workpath.substr(0,ppos)+idsep+vorh+idsep ; /* und konstruieren die Id so */ } /* Na endlich. Workpath enthält nun die Id, auf die wir uns beziehen, um unseren Menüteil zu positionieren. */ vpos[menupfad] = vpos[workpath] + mhoehe[workpath] - 2 ; /* und das ist dann letztlich ganz einfach. */ if(debug) debug = confirm("Pos. " + vpos[workpath] + ": " + workpath + " - " + document.getElementById(workpath).firstChild.nodeValue + "\n" + "Höhe: " + mhoehe[workpath] + "\n" + "Pos. " + vpos[menupfad] + ": " + menupfad + " - " + document.getElementById(menupfad).firstChild.nodeValue) ; } // Breitenkorrektur: // Grundsätzlich gibt das Stylesheet die Breite vor. // Aber der dritte Level kann im Abschnitt 2 schmal und im Abschnitt 3 breit sein. // Wir sehen daher nach, ob für den übergeordneten Level eine Korrekturbreite besteht. ueber_level = dieseskind.id.substr(0,dieseskind.id.lastIndexOf(idsep)) ; ueber_level = ueber_level.substr(0,ueber_level.lastIndexOf(idsep)) ; if(bkorr[ueber_level]) { dieseskind.style.width = bkorr[ueber_level] + "px" ; } // sollen wir das ganze nun anzeigen oder nicht? if(dieserlevel > 1) { // falls der grösser als 1 ist dieseskind.style.display = "none" ; // wird der Menüpunkt ausgeblendet } // gibt's von hier aus noch Untermenus? weiche = false ; if(dieseskind.tagName == "P") weiche = true ; //