Autor Beitrag
delnu
Ehemaliges Mitglied
Erhaltene Danke: 2



BeitragVerfasst: Fr 14.04.17 00:48 
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.
Einloggen, um Attachments anzusehen!
delnu
Ehemaliges Mitglied
Erhaltene Danke: 2



BeitragVerfasst: So 16.04.17 17:44 
Hier nun die php-Version, bei der die als Textdateien gespeicherten Menüleisten per php eingebunden werden.

Dabei werden Link, title-Attribut und Linkbezeichnung jeweils durch | getrennt, also z.B. so:
ausblenden Quelltext
1:
http://www.entwickler-ecke.de/|""|entwickler-ecke					

Die Auswertung berücksichtigt dies. Wenn es nur einen Eintrag pro Zeile gibt, wird dieser automatisch als normale HTML-Anweisung übernommen. Dadurch können auch die Klassen-Zuordnungen "aha" und "visible" Bestandteil sein.

Und bitte dran denken: Das ist nichts Fertiges, sondern es sind Anregungen. Mir ist klar, daß das gesamt Prinzip versteckter Menüs in der hier präsentierten Form seine Grenzen zum einen in der geringen Zahl der möglichen Menüeinträge hat, es andererseits aber auch Probleme bei der Überdeckung von Bedienelementen der integrierten Websites gibt. Für beides gibt es mit Sicherheit Lösungen.

Die Menge der Einträge kann z.B. durch scrollbare Menüs erhöht werden, was allerdings NICHT über Scrollbars regelbar ist, denn die wären im Normalfall dauernd sichtbar. Das müßte also mit JavaScript gemacht werden. Dazu hatte ich schon mal einen Lösungsansatz, bei dem es aber Umsetzungsschwierigkeiten gibt, weil er eine Portierung aus fremder Quelle ist, deren Prinzip mir etwas unklar blieb.

Die Überdeckung von Elementen eingebundener Websites könnte verhindert werden, wenn das Ein- bzw. Ausschalten aller verdeckten Menüs (wahrscheinlich ebenfalls per JavaScript) an einem einzigen, genau festgelegten Punkt (vielleicht nicht gerade pixelgenau, aber so ca. 8*8 bis 16*16) nicht nur unsichtbar bliebe, sondern auch inaktiv/aktiv (toggle-Funktion) geschaltet werden könnte.

Für solche Schritte habe ich aber nicht genügend Wissen.
Einloggen, um Attachments anzusehen!
delnu
Ehemaliges Mitglied
Erhaltene Danke: 2



BeitragVerfasst: So 16.04.17 20:02 
Leider mußte ich feststellen, daß mir demnächst eine Weile wenig Zeit zur Weiterentwicklung bleibt. Darum habe ich das im vorigen Beitrag beschriebene Konzept mit scrollbarem Menü und gezielt anzuklickendem Bereich zum Togglen des Scrollmenüs nun kurz soweit angepaßt, daß es technisch weitgehend kompatibel zu den bisherigen Ansätzen ist.

Aber Vorsicht: Das Konzept ist unausgereift, weil die Steuerung der Bewegungsrichtung des scrollenden Menüs fehelerhaft ist und eigentlich das Menü sofort verschwinden müßte, sobald man einen Link anklickt. Statt dessen scrollt es weiter.

In Funktion zu sehen auf big.nut.cc/scrollmenu.

Zu den Snapshots:

points.PNG = der linke Punkt öffnet bzw. schließt das Scrollmenü, der rechte bewirkt eine Änderung der Scrollrichtung
user defined image

scrollmenu.PNG = Der linke, nach rechts zeigende Pfeil bewirkt ein Scrollen nach rechts. Rechts ist einer für die Gegenrichtung.
user defined image

Ich bitte um Nachsicht, das momentan nicht selbst weiterentwickeln zu können. Die Ursprungsideen sind von 2013 und ich müßte mich völlig neu in die außer Kontrolle geratene Steuerung einarbeiten.


P.S.: Schade, daß man hier anscheinend Grafiken nur extern einbinden kann. Wenn dann mal die Website weg ist, auf der sie sich befinden, sind die Grafiken auch weg. Das kennt man zur Genüge aus anderen Foren.

Edit: Ich habe den Beitrag nochmal editiert. Erst waren die Grafiken plötzlich weg und erst nach erneutem (identischen) Eintrag eines der beiden Links wieder da und dann sah ich noch, daß da statt 2013 (wo ich das Projekt mal begann) oben ein falsches Jahr stand und habe das korrigiert.
Einloggen, um Attachments anzusehen!


Zuletzt bearbeitet von delnu am Mo 17.04.17 09:07, insgesamt 2-mal bearbeitet
Boldar
ontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic starofftopic star
Beiträge: 1555
Erhaltene Danke: 70

Win7 Enterprise 64bit, Win XP SP2
Turbo Delphi
BeitragVerfasst: So 16.04.17 21:35 
Du kannst Grafiken ganz einfach im Anhang anhängen und dann im Post einbinden.
Dies wäre auch hilfreich, denn ehrlich gesagt ist mir nicht so ganz klar was du mit "Verstecktem Menü" überhaupt meinst.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 2



BeitragVerfasst: So 16.04.17 22:54 
Zitat:
Du kannst Grafiken ganz einfach im Anhang anhängen und dann im Post einbinden.
:roll:

Genau das hatte ich versucht, aber es hat nicht funktioniert. Darum sind sie extern eingebunden.

Die Erklärung, was versteckte Menüs sind, ist doch bereits in den vorigen Themen-Beiträgen zu lesen. :lol: 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.

Aber trotzdem nochmal kurz für Lesefaule: Ein verstecktes Menü ist nicht sichtbar, sondern offenbart sich erst, wenn der Mauszeiger über bestimmte Bildschirmbereiche bewegt wird. Beim bisher von mir zuletzt dazu veröffentlichten Beitrag sind es die beiden magischen Punkte unten links in der Grafik points.PNG. Beim Klicken auf den rechten Punkt erscheint das Menü wie es in der Grafik scrollmenu.PNG zu sehen ist. Sonst ist dort der Hintergund zu sehen. Der ist auf den Snapshots nur deshalb grau, weil die beim Start eingebundene Website einen solchen Hintergrund hat.

Die Downloads enthalten nichts anders als pure Quellcodes, die natürlich direkt ausführbar sind. Der im ersten Beitrag funktioniert auch ohne Server, die anderen brauchen einen, weil sie php-Code enthalten.

Edit: Weil die oben eingebundenen, externen Grafiken plötzlich weg waren, habe ich den Beitrag editiert, um zu prüfen, woran das lag. Nachdem ich dann einen der beiden Links nochmal editiert hatte (die waren ja nach wie vor auf meinem Server) waren beide wieder sichtbar. Was alles ist hier wohl noch anders als bei anderen Foren?

Komisch, der Link ist oben nicht als solcher erkennbar. Darum hier nochmal: big.nut.cc/scrollmenu

Edit: Was hier mit den Grafiken los ist, weiß ich nicht. Weil die anscheinend immer wieder auf seltsamen Weise entschwinden, hier die direkten Links, die eigentlich oben die Grafiken anzeigen sollen, was aber immer mal wieder nicht so ist. Mal sind sie weg, dann wieder da, dann wieder weg. Seltsam. Vor allem ist es abartig, daß man die eingebundenen Grafiken erst dann (wenn überhaupt) sieht, wenn man eingeloggt ist. Auf diese Weise kann ja keiner auf die Idee kommen, sich die Sache mal anzusehen, wenn jeder Anreiz fehlt bzw. dieser anscheinend sogar vorsätzlich blockiert wird.

big.nut.cc/scrollmenu/points.PNG

big.nut.cc/scrollmenu/scrollmenu.PNG