// JavaScript Document // Version 0.3 // Entflechtung der Farbbehandlung -> Diese wird über Block "a" -Tags und das Ziehen einer anderen CSS-Klasse erledigt // !!!! Note: Eine komplette Auslagerung der Farbumschläge über CSS und hover ist nicht möglich, da bei Wechsel der Maus ins Submenü die Highlight-Farbe verloren gehen würde // Änderungen zur Version 0.2: Korrekturen am Verlauf des Merkens der Normal-Klasse -> nur beim aktuellen Menupunkt sinnvoll (sonst werden nicht exist. hi_hi_..-Klassen verlangt // Namenskonvention // Grundklasse für Menupunkte haben einen Namen im jeweiligen CSS-Sheet -> die zugehörige Hilight Klasee hat den Zusatz "_hi" // Man merkt sich für jeden aktivierten Menüpunkt (also jeden aktiven in der Kaskade der aktivierten Menüs -> d.h. pro Level) die vorgegebene Klasse, // um darauf bei Bedarf wieder zurückzugehen // --------------------------------------------------------------------------------- // Schritt 0: Anlegen von menuspezifischen Arrays als globale Arrays ------------- // --------------------------------------------------------------------------------- var vor = 3; // Anzahl der Angaben vor der eigentlichen Menuqualifizierung in der Übergabeparameterlise an sub_menu(args) // Die nachfolgenden Strukturen sind in jedem Fall notwendig var h_sm = new Array(); // 2-dim Menu sm[men][i] (i: level; men: Hauptmenu der Seite) enthält die Handles für die Submenus inkl. Hauptmenu [men][0] var h_mp = new Array(); // 2-dim Menu mp[men][i] (i: level) Handles des jeweils aktivierten Menupunkts im Menu des aktuellen und der jeweils höheren Levels var n_mp = new Array(); // 2-dim Menu sm[men][i] (i: level) Nummer des jeweils aktivierten Menupunkts im Menu des aktuellen und der jeweils höheren Levels (Zahl entspr. Position) // Anlegen des Arrays zum Merken der Klassennamen der var class_mp = new Array(); // 2-dim Menu class_mp[men][i] (i: level) Name der Grundklasse des jeweils aktivierten Menupunkts im Menu des aktuellen und der jeweils höheren Levels // Array zum Merken der Timer für die Hauptmenus der Seite var h_timer = new Array(); // hat soviel Elemente wie Menüs -> speichert Timer Handles // Arrays zum Merken der letzten geöffneten Menüpunkte var last_level = new Array(); // last_level[men] hat soviel Elemente wie Menues (men identifiziert das aktuelle Menu var h_last_hit_menu = new Array(); // last_hit_menu[men] var h_last_shown_smenu = new Array(); // last_shown_smenu [men] // --------------------------------------------------------------------------------- // -------Funktionen --------------------------------------------------------------- // --------------------------------------------------------------------------------- // Funktion, die beim Load der jeweiligen Webseite aufgerufen werden muss function prepare (n_menu) { //n_menues: Anzahl der Menues, die auf der Seite zu bedienen sind // Pro Menu muss ein Array zum Merken des letzten geöffneten Submenues + Merken der Timer aufgebaut werden for (n=1; n <= n_menu; n++) { h_sm[n] = new Array(); h_mp[n] = new Array(); n_mp[n] = new Array(); class_mp[n] = new Array(); // 2 dim Array zum Merken der Grundklasse eines Menupunkts last_level[n] = 0; } } // Funktion, die bei Mouseover (flag =1 oder 2) oder Mouseout (flag =0) eines menupunktes ausgelöst wird function sub_menu (args) { var n_mp_akt; // Der aktuelle Menupunkt auf dem aktuellen Level var n_mp_akt_above; // Der aktuelle Menupunkt ein Level vorher (=drüber) var la_level; // Der zuletzt aktive Level // Die "vor"-Variablen var flag = arguments[0]; // 1: Anzeigen des zum Menupunkt gehörigen Submenus var level = arguments[1]; // level, auf dem man sich befindet (0: Hauptmenu) var men = arguments[2]; // steuert, welches Hauptmenu der Seite man gerade behandelt // // Schritt 1 : Timer eliminieren - dieser Schritt ist zeitlich am wichtigsten -> daher separat und zuerst initiiert //------------- if ( flag != 0 ) // Wichtiger Schritt: Timer eliminieren! Sonst bleibt kein Menu offen ! { if (h_timer[men] != null ) { window.clearTimeout(h_timer[men]); h_timer[men]=null; } } // Schritt 2: Ermittlung bestimmter Parameter - werden in Schritt 3 benötigt // ----------- // Unabhängig vom weiteren Vorgehen (Flag -abhängig) werden nun zuerst die Übergabeparameter identifiziert leng = arguments.length; if ( (leng - vor - (level+1)) != 0 ) { alert("Falscher Level ! leng = " + leng + " flag = " + flag + " level = " + level ); } n_mp_akt = arguments[leng-1]; // Nummer des aktuellen Menupunktes auf dem akt. level la_level = last_level[men]; // Wichtige Voraussetzung der nächsten Schritte: Wenn man einen Level tiefer war, dann hat h_mp[men][level] hat noch die Werte vom vorhergehenden Zustand !!!! // Dies liegt darn, weil level von 0 an durchnummeriert ist (s. Loop weiter unten) und weil h_mp noch nicht neu belegt wurde // Schritt 3: Nun die letzten Submenus unsichtbar machen, wenn erforderlich - nächst wichtiger Schritt, daher separat initiiert // ---------- if ( flag != 0 ) { // Unsichtbarmachen des letzten Submenus ? if (la_level == level) // Man blieb im gleichen Submenu und ging (möglicherweise) nur auf einen anderen Punkt -> daher smenu zur Sicherheit verstecken { if ( h_last_shown_smenu[men] != null) { h_last_shown_smenu[men].style.visibility = "hidden"; } } // Falls level reduziert wird (rausgehen nach links) -> auch last_hit_menu unsichtbar machen if (level < la_level) { if ( h_last_hit_menu[men] != null) // null nur, wenn man das erste Mal auf das Level 0 Menu kommt { h_last_hit_menu[men].style.visibility = "hidden"; } if( n_mp[men][level] != null && n_mp[men][level] != n_mp_akt ) // falls man links oben oder unten rausgegangen ist, // also den Menupunkt auf level gewechselt hat { h_mp[men][level].className = class_mp[men][level]; // Wenn n_mp[men][level] ne 0 -> class_mp[men][level] sollte // mit altem Wert vom letzten Schritt gefüllt sein. } } } // Schritt 4: Dieser Schritt darf erst nach Schritt 3 erfolgen !!!! Merken des übergeordneten Menüpunkts, für den Fall dass man den akt. Level verlassen sollte // ---------- if (level > 0 ) { n_mp_akt_above = arguments[leng-2]; } else { n_mp_akt_above = arguments[leng-1];} // Schritt 5: // Hier wird zunächst die Frage beantwortet, wo ich bin - welches Menu und welcher Menupunkt // ------------ // Man ist immer auf einem Menupunkt, wenn diese Funktion aufgerufen wird. // level ist der Levels des Menus, in dem sich die Maus befindet; je nach Flag wird dann noch zusätzl. eine weitere Ebene angezeigt // Namensinitialisierung -> Startwert des Namens -> danach über den Loop weiterer Aufbau des Namens smenu = "sm"; mpunkt = "sp" + "_" + arguments[vor + 0 - 1]; // Ist korrekt, da dies gerade auf die jeweilige Hauptmenü-Nummer in der Parameterliste führt. for (ilv=0; ilv <= level; ilv++) { smenu = smenu + "_" + arguments[(vor + ilv - 1)]; // smenu wird bei jedem Loop-Durchgang erweitert // -> entspricht gerade der Namensgebung mit sukzessiven Unterstrichen // Beim ersten Mal wird gerade das Hauptmenü genereiert. h_sm[men][ilv] = document.getElementById(smenu); mpunkt = mpunkt + "_" + arguments[(vor + ilv)]; h_mp[men][ilv] = document.getElementById(mpunkt); n_mp[men][ilv] = arguments[vor + ilv] ; // !!!! Wichtig !!!!! } // ---------- // Schritt 6: erst jetzt kümmert man sich um die noch sichtbaren Menuüs und Menüpunkte - Fallunterscheidung nach dem Flag-Wert // ---------- // Schritt 6.1 : Abfangen der Situation, dass man einen aktuellen Menüpunkt verlässt und nicht auf einen anderen Menüpunkt geht // --------------- // Man ist möglicherweise komplett ausserhalb des Menübereich -> Es muss ein Timer gestartet werden, der das behandelt // Geht man in der Timer-Zeit wieder auf einen Menüpunkt, so wird der Timer eliminiert s.o. // Ein Farbumschlag ist nicht erforderlich, da alle übergeordneten Menüs bereist die richtige Farbe haben. if (flag == 0) // Zur Sicherheit Löschen aller Menus -> Wenn man wieder auf einen Menüpunkt wechseln sollte, macht der dann erfolgende Fktns.aufruf alles richtig { // Zurücksetzen der Klasse für den eben verlassenen Menupunkt - Sicherheitsmaßnahme (auch optisch Ok) //h_mp[men][level].style.backgroundColor = sm_color[men][0]; // h_mp[men][level].style.backgroundColor = sm_color[men][level][0]; // h_mp[men][level].style.color = fg_color[men][level][0]; // if ( h_mp[men][level].style.filters ) // { h_mp[men][level].style.filters.alpha.opacity=opaz_ie[men][level][0]; } // else // { h_mp[men][level].style.MozOpacity=opaz_moz[men][level][0]; } h_mp[men][level].className = class_mp[men][level]; // alert (" clase = " + h_mp[men][level].className); // Timer starten, der last_shown_smenu und last_hit_menu unsichtbar macht h_timer[men] = window.setTimeout("erase(" + men + ");", 500); } else // Man ist auf einen aktivierbaren Menüpunkt gegangen { // Schritt 6.2 : Setzen Sichtbarkeit aller übergeordneten Menüs + Farbe der zugeordneten, übergeordneten Menüpunkte sowie des aktuellen Menüpunkts // ------------- // Die übergeordneten Menüs müssen sichtbar sein und die übergeordneten Menüpunkte müssen die Highlight-Farbe kriegen bzw. behalten // Auch der aktuelle Punkt wird gehighlighted (Anm. falls der aktuelle Menüpunkt ein inaktiver ist, muss dies in der "_hi-Klasse" berücksichtigt sein for (ilv=0; ilv <= level; ilv++) { if (class_mp[men][ilv] == null) // Änderung V0.2 -> V0.3 { // Zunächste Merken der gewöhnlichen Klasse des jeweiligen (übergeordneten) Menüpunktes class_mp[men][ilv] = h_mp[men][ilv].className; } // Hilite Klasse hilite_class = class_mp[men][ilv] + "_hi"; h_mp[men][ilv].className = hilite_class; // Sichtbarkeit des Menus bzw. Farbe der aktuellen Zeile h_sm[men][ilv].style.visibility = "visible"; // h_mp[men][ilv].style.backgroundColor = sm_color[men][ilv][1]; // h_mp[men][ilv].style.color = fg_color[men][ilv][1]; } // Schritt 6.3 : Menupunkt mit anzeigbarem Submenu - dieses muss definiert sein - entspr. Fehler werden im Moment nicht abgefangen // ------------- if (flag == 1) // Sichtbarmachen des nächsten Submenues - aber keine Highlight !!!! { // Identifikation des nächsten Submenus sm_next = smenu + "_" + arguments[(vor + level)]; // alert ("sm_next = " + sm_next); h_sm[men][level+1] = document.getElementById(sm_next); // h_sm[men][level+1].style.visibility = "visible"; // Es wird aber keine Highlight-Farbe gesetzt //Protokollierung - Merken des gerade mit der Maus berührten Levels und entsprechenden Menues sowie des zugehörigen gezeigten Submenus last_level[men] = level; // last_level = level; h_last_hit_menu[men] = h_sm[men][level]; // last_hit_menu = sm[level]; h_last_shown_smenu[men] = h_sm[men][level+1]; // last_shown_smenu = sm[level+1]; } // Schritt 6.4 : Menupunkt ohne Submenu // ------------- if (flag == 2) // Kein Sichtbarmachen des nächsten Submenues -> Nur Merken Level, akt. aktiv berührtes Menu // farbe wurde schon weiter oben umgesetzt { //Protokollierung last_level[men] = level; // last_level = level; h_last_hit_menu[men] = h_sm[men][level]; // last_hit_menu = sm[level]; h_last_shown_smenu[men] = null; // last_shown_smenu = sm[level+1]; here not shown } // Ende der Verzweigung zu aktiven Menüänderungen } // Ende Funktion sub_menu } // Funktion, die beim Verlassen eines Menus ausgelöst wird // Diese Funktion eliminiert zeitgesteuert alle (!) offenen Submenues <-> Normalfall // Sie muss bei Wechsel eines Menupunktes daher durch Stoppen des Timers verhindert werden (s. sub_menu) function erase (man) { // Beachte, dass vor dem Unsichtbarmachen die Ursprungsklassen der Menupunkte restauriert werden müssen var level = last_level[man]; // nun das letzte (tiefste) gezeigte Submenu unsichtbar machen (1 tiefer als da wo die Maus war) if ( h_last_shown_smenu[man] != null) { h_last_shown_smenu[man].style.visibility = "hidden"; h_last_shown_smenu[man] = null; } // nun alle Submenus inkl dessen, wo die Maus war unsichtbar machen if ( level > 0 ) // nur nötig, wenn wir tiefer als auf Hauptmenü-Ebene waren { // Alle Submenues - ausser Hauptmenu - bis zum Level unsichtbar machen for (ilv=1; ilv <= level; ilv++) { h_sm[man][ilv].style.visibility = "hidden"; h_sm[man][ilv] = null; h_mp[man][ilv] = null; n_mp[man][ilv] = null; } } // Nun die Klasse des betroffenen Menüpunkts im Hauptmenu auf die Normalklasse setzen // h_mp[man][0].style.backgroundColor = sm_color[man][0][0]; // h_mp[man][0].style.color = fg_color[man][0][0]; // oder Klassenwechsel // h_mp[man][0].className = "menuh"; // Nun Opazitätswerte zurücksetzen // if ( h_mp[man][level].style.filters ) // { h_mp[man][level].style.filters.alpha.opacity=opaz_ie[man][0][0]; } // else // { h_mp[man][level].style.MozOpacity=opaz_moz[man][0][0]; } if( class_mp[man][0] != null ) { h_mp[man][0].className = class_mp[man][0]; } h_mp[man][0] = null; n_mp[man][0] = null; last_level[man] = 0; }