Nachdem ich mich nun nach einer Weile mal wieder mit einem meiner Lieblingsprojekte (versteckte Menüs für Websites) befaßt hatte, ist es an der Zeit, die zugrundeliegende Idee der Allgemeinheit verfügbar zu machen.
Nachdem ich eigentlich zunächst nur für mich selbst begonnen hatte, wegen der besseren Übersichtlichkeit und Zugriffsmöglichkeiten, fremde Websites so in iframes einzubinden, daß das Menü ständig sichtbar bleibt und dadurch schnell und ohne Umstände zwischen Websites wechseln zu können, entstand zunächst das, was ich mittlerweile im Internet als "freelinks.usa.cc" auch anderen bereithalte.
Wenn man auf diese Weise mit iframes arbeitet, bleibt für den eigentlichen Inhalt der eingebunden Websites wenig Platz.
Warum also nicht einen anderen Weg gehen, bei dem die externen den gesamten Fensterbereich des Browers nutzen können, aber dennoch eine zentrale Verwaltung erhalten bleibt?
Der Weg dazu führt zunächst über transparente Hintergründe, so daß durch die Menüzeilen hindurch die intergrierten fremden Websites zu sehen sind. Allerdings stören dann trotzdem selbst die sichtbaren Menüreste oft.
Was also tun? Der Weg ist viel einfacher, als man zunächst denkt. Es ist nämlich möglich, sowohl die Textfarbe als auch die Hintergrundfarbe auf transparent zu setzen. Die Quelltexte sind weitgehend unkommentiert. Bei Fragen werde ich versuchen, diese zu beantworten.
Das Beispiel integriert beim Start eine Seite mit Hinweisen, wie sich das Verhalten der Menüs ändern läßt. Aus technischen Gründen mußte ich auch ein paar Browserweichen für den IE und den IE6 einbauen. Beispielsweise wird die Entwickler-Ecke im IE falsch dargestellt. Sorry, falls dies für Versionen nach 8 nicht zutrifft. Aber weil ich bei XP bleibe (bitte keine Kommentare hierzu) weiß ich nichts über das Verhalten mit höheren Versionen.
Ach so: Das Beispiel benutzt nur HTML und CSS. Eine spätere Version mit php wird dynamisch aus reinen Textdateien bestehende Linklisten einbinden.
Das unveränderte Beispiel (so wie hier der angehängte Quelltext ist) ist online unter
big.nut.cc/hidden/ in Funktion zu sehen.
Was die Quellen betrifft, so weiß ich lediglich, daß die Trickserein mit fest stehenden Kopf- und Fußzeilen (auch beim IE) ursprünglich von Stu Nicchols (
www.cssplay.co.uk/ ) stammen, dort leider umständlich aufgebläht.
Nachtrag: Bei meinen Tests mit den beispielhaft integrierten Websites hatte ich nicht überprüft, inwieweit diese sich tatsächlich immer in einem iframe öffnen lassen. Zuhause hatte ich damit keine Probleme, aber nachdem ich das Beispiel auf den erwähnten Websoace hochlud, werden manche Websites dann doch in einem neuen TAB geöffnet. Wer das also praktisch einsetzen will, sollte auch solche Eventualitäten der einzubindenden Websites sorgfältig prüfen.
Zum direkten Vergleich wie das mit versteckten und einigen dauerhaft sichtbaren Menüteilen aussieht, habe ich noch eine zweite Ansicht erstellt :
big.nut.cc/hidden2/ , wobei mir dann allerdings auffiel, daß es im CSS noch ein paar Farbfehler gibt.
Um die versteckten Links zu sehen, einfach in Kopf- bzw. Fußzeile die Maus nach rechts neben den sichtbaren Links über den scheinbar leeren Bereich bewegen.
Noch eine Ergänzung: Erstaunlicherweise werden bestimmte Bezeichnungen anscheinend manchmal "durchgereicht", so wie es mir ging, als ich meine Website "freelinks.usa.cc" über das versteckte Menü aufrief. Aufgrund des identischen Namens für das iframe dort und bei diesem Programmbeispiel (hiddenmenu) werden die bei "freelinks.usa.cc" eingebunden Websites bei darüber gelegtem hiddenmenu nicht mehr im iframe gehalten, sondern direkt ins iframe von hiddenmenu geladen.
Es empfiehlt sich also, für hiddenmenu möglichst exotische Bezeichnungen für IDs und Classes zu wählen, um vor solchen möglichen Überraschungen geschützt zu sein.
Au0erdem sollte genau überlegt werden, auf welche Höhe hiddenmenu positioniert wird. Bei der hier veröffentlichten, ersten offiziellen Version läßt sich das innerhalb der index.htm (im gegenüber der CSS-Datei überschrieben Style-Bereich für #header und #footer) ändern. Für meine eigenen Zwecke haben sich selbst Randabstände von oben und unten je 24 Pixels immer noch als zu gering erwiesen.
Im Anhang jetzt eine alternative CSS-Datei, bei der nicht nur die erwähnten Farbfehler entfernt wurden, sondern außerdem die Darstellungsgröße der Linkeinträge weniger wuchtig ist. Die Modifizierung wurde zunächst durch ein Hilfsprogramm analysiert und von diesem teils unnötig aufgebläht. Ich bitte das zu entschuldigen.
Außerdem habe ich Websites verlinkt, auf denen sich die Funktionsweise testen läßt. Die verlinkten Websites enthalten absolut genau die Sachen, deren Quellen hier zum Download bereitstehen.