Ebenen ausblenden

Denis76 schrieb am 11.09.2019 um 20:36 Uhr

Hallo liebe Forumsmitglieder,

ganz zuerst, ich nutze den Webdesigner Premium 16.2.1.57325 DL x64 Aug 15 2019, Windows 10. Ich habe keine Kenntnisse im Schreiben von html.

Nun zu meiner Frage, ich möchte eine Website erstellen bei der ich eine Navigationsleiste über ein Button aufrufen kann, siehe Bild, Button links oben.

Ich hab hierzu mal ein kurzes Beispiel angelegt. Die Seite hat ein bildschirmfüllendes Hintergrundbild. Darüber gibt es eine Ebene wo Text drin stehen soll oder Bilder oder anderes. Der Button liegt in den Ebenen MouseOver und MouseOff und verweist auf eine Popup Ebene. Sobald ich den Button aufrufe soll folgendes passieren:

Es geht eine in der Popup Ebene auf, da liegt ein halbtransparentes Rechteck drauf welches einzig dem Zweck dient das HIntergrundbild etwas dunkler zu machen sowie eine Navigationsleiste. Diese ist versehen mit MouseOver Effekt und soll dann per Klick auf die entsprechenden Seiten weiterleiten. Beim öffnen der Popup Ebene sollen alle anderen Ebenen bis auf die Pasteboard Background quasi unsichtbar werden, siehe Bild

Passieren tut natürlich anderes

Es sind auch alle anderen Ebenen sichtbar, egal wie ich sie anordne. Gibt es eine Möglichkeit, beim aufrufen der Popup Ebene alle anderen bis auf gewünschte Ebenen unsichtbar zu schalten? Ich habe das Buch konsultiert, hier im Forum gesucht, die Hilfefunktion des Webdesigner in Anspruch genommen, bekomme aber keine Idee wie ich das realisieren kann. Mir ist bewusst, dass ich über einen Umweg mit einer Extraseite das Menu konstruieren könnte mit dem Hintergrundbild und ohne den Rest. Das finde ich aber wenig elegant, da ich für alle weiteren Seite bei denen ich einen anderen Hintergrund einbaue jeweils eine eigene Seite für die Navigation machen müsste. Ich weiß auch, dass ich den Firlefanz lassen könnte und eine Standardnavigation hinbaue die ihren Zweck erfüllt, mir hat's aber diese Form von Navigation angetan 😎

Vielleicht weiß hier jemand Rat.

Danke schonmal

Kommentare

BeRo schrieb am 11.09.2019 um 21:11 Uhr

[...] Beim öffnen der Popup Ebene sollen alle anderen Ebenen bis auf die Pasteboard Background quasi unsichtbar werden [...]

Nichts ist einfacher als das. 🤓

Um das zu erreichen legst Du einfach ein seitengroßes Rechteck in der Hintergrundfarbe unter die Navigationsleiste die Du in der popup Ebene "geparkt" hast.

Schau Dir mal diese online Demo an. Da habe ich etwas Vergleichbares umgesetzt. In der Demo ist zwar das Hintergrund Rechteck halb transparent, der Hintergrund scheint also durch, aber den Grad der Transparenz kannst Du ja beliebig anpassen.
Dass in der Demo der Inhalt der popup Ebene automatisch im Browser Fenster zentriert wird, war der Wunsch des Thread Erstellers, das musst Du also nicht übernehmen, es sei denn...

Wie auch immer, hier ist der Link zum Lösungsvorschlag.

Viel Erfolg

Denis76 schrieb am 11.09.2019 um 22:14 Uhr

Hi BeRo,

vielen Dank für die prompte Antwort. Das mit dem halbtransparenten Rechteck habe ich gemacht, vielleicht sieht man den Unterschied zwischen Bild 1 und Bild 2 nicht so gut. Auf dem Rechteck liegt dann die Navigationsleiste, die ja bei mir auch ziemlich durchsichtig ist. Nur da drunter soll nichts anderes zu sehen sein als das Hintergrundbild. Bei deinem Beispiel überdeckt das Popup durch das weiße Rechteck mit dem Bild drauf den darunter liegenden Inhalt. Bei mir soll aber einfach nur das Hintergrundbild und kein weiterer Inhalt sichtbar sein. In dem dritten Bild was ich angehängt habe sieht man den Text, den möchte ich nicht einfach überdecken, die Navleiste soll ja auch so durchsichtig bleiben, der Text muss also weg 😀

BeRo schrieb am 11.09.2019 um 22:36 Uhr

[...] In dem dritten Bild was ich angehängt habe sieht man den Text, den möchte ich nicht einfach überdecken [...] der Text muss also weg

Dann leg ihn einfach auf eine eigene popup Ebene, die Du beliebig ein- und ausblenden kannst. Dann sorgst Du dafür, dass die popup Ebene mit dem Text schon beim Öffnen der Seite eingeblendet wird.
Nach einem Klick auf den "Hamburger" Button wird dann die popup Ebene mit der Navigationsleiste eingeblendet und gleichzeitig die popup Ebene mit dem Text ausgeblendet.

In der online Demo, die Du Dir vorhin angesehen hast, wird das ebenfalls realisiert. Da wird mit einem Klick eine popup Ebene aufgerufen und eine andere geschlossen.
Hier findest Du die Erklärung.
Wenn Dir das zu kompliziert erscheint, es geht auch einfacher, z. B. so:

popup: open "Ebene1" "Ebene2" close "Ebene3" "Ebene4"

Die o. Befehlssequenz wird dazu anstelle eines Links eingetragen

Edit 23:18 h

Für die o. a. einfachere Lösung hier noch eine Kurzanleitung...

Gehen wir davon aus, dass Du für den Text eine separate Ebene anlegst und diese Ebene direkt über der Standard MouseOff Ebene des WD liegt, dann kannst Du die Text Ebene z. B. "Text (lock)" nennen und sie mit der u. a. HTML Anweisung schon beim Öffnen der Site anzeigen lassen.

<body onload = "xr_cpu(4)">

Die Navigationsleiste liegt auf einer weiteren popup Ebene darüber. Für unser Beispiel habe ich die Ebene "NavBar (lock)" genannt.

Jetzt musst Du nur noch den schon angesprochenen Link anlegen, der die NavBar Ebene öffnet und die Text Ebene schließt.

popup: open "NavBar (lock)" close "Text (lock)"

Mehr ist nicht zu tun.😊

P.S.
Du siehst, dass die Ebenen das Suffix "(lock)" bekommen haben. Das ist nötig, um zu verhindern, dass eine Ebene ohne explizite Anweisung geschlossen wird, also z. B. durch einen einfachen Klick irgendwo auf der Seite...

Denis76 schrieb am 12.09.2019 um 10:35 Uhr

Hi BeRo,

vielen Dank, für die schnelle Erklärung. Ein paar Verständnisfragen habe ich noch, wenn alle Inhalte der Seite (nicht nur Text, auch Bilder, Buttons etc.) beim Einblenden des Navigations Popup bis einzig auf das Hintergrundbild unsichtbar werden sollen, dann müssen sie jeweils auf eigenen, als Popup definierten Ebenen liegen? (Geht das überhaupt mit MouseOff und Mouse Over wo der 'Hamburger' liegt, der soll ja auch weg?) Dann kann ich die über 'close...' im Linkfenster zumachen, oder hab ich das nicht richtig verstanden? Der 'close-Befehl' geht nur bei Popup, oder?. Und 'Nav Bar' und 'MouseOver Nav' müssen ganz oben liegen, richtig?

Wie verhält sich das beispielsweise wenn ich irgendein Button zum weiterleiten auf eine andere Webseite auf eine Popup Ebene lege und mit einem MouseOver Effekt versehe. Dieser liegt ja auf einer eigenen Ebene. Wenn jetzt das ganze wie beschrieben ausgeblendet werden soll, wie muss die MouseOver Ebene bearbeitet werden?

Vielen Dank schonmal vorab 👍

BeRo schrieb am 12.09.2019 um 12:50 Uhr

[...] wenn alle Inhalte der Seite [...] jeweils auf eigenen, als Popup definierten Ebenen liegen? [...]

Kein Problem. Die Anzahl der Ebenen wird vom WD AFAIK nicht begrenzt. Sollte es bei einer völlig leeren MouseOff Ebene ein Problem geben, legst Du einfach ein transparentes Rechteck irgendwo auf die Seite, damit hat die Ebene ein Objekt, sie ist also nicht leer.

[...] Geht das überhaupt mit MouseOff und Mouse Over [...]

Ja, das geht. Der Inhalt einer MouseOver Ebene wird ja nur sichtbar, wenn der Inhalt der darunter liegenden (MouseOff) Ebene ein MouseMove Ereignis "sieht", wenn also der Mauszeiger darauf positioniert wird.
Blendest Du die entsprechende MouseOff Ebene aus, bleibt die zugehörige MouseOver Ebene unsichtbar.

[...] Dann kann ich die über 'close...' im Linkfenster zumachen [...]

Genauso geht das... 😊

[...] Der 'close-Befehl' geht nur bei Popup, oder? [...]

Auch das ist richtig.

[...] Und 'Nav Bar' und 'MouseOver Nav' müssen ganz oben liegen [...]

Nein, die kannst Du frei positionieren.

[...] Wenn jetzt das ganze wie beschrieben ausgeblendet werden soll, wie muss die MouseOver Ebene bearbeitet werden? [...]

Du musst bei der popup Ebene mit MouseOff/MouseOver Effekt nur darauf achten, dass sie immer zusammen mit der zugehörigen MouseOver Ebene angelegt wird. Die MouseOver Ebene muss immer unmittelbar über der zugehörigen MouseOff Ebene angelegt werden.
Ansonsten ist beim Ein-/Ausblenden nichts weiter zu beachten (s. o.)

Probier's einfach...