Edomi-Visu: Auf- und zuklappbare Menüs (accordion-Effekt)

[gkamp]

Guten Morgen Edomi-Fans,

ich beginne gerade eine neue Visu zu planen und mache mir Gedanken über die Menüstruktur. Habe denke ich einen guten Ansatz gefunden und frage mich nun, ob ich im geplanten Hauptmenü auf- und zuklappbare Elemente umsetzen kann. Also nach dem Motto:

KG
-- KG Raum 1
-- KG Raum 2
EG
-- EG Raum 1
-- EG Raum 2
-- EG Raum ...
OG
-- ...

Klickt man auf das Geschoss (hier bspw. EG) sollen die Räume darunter eingeblendet werden und andere Stockwerke eingeklappt sein (accordion-Effekt). Geht das mit Edomi-Bordmitteln? Hat das jemand von Euch auch schon so umgesetzt?

Viele Grüße,
Flo

[Brick]

Hi,

Geht.. hab ich .. ist aber etwas tricky..
wobei das bei mir aktuell nicht ausklappt, sondern "erscheint" ..

Ich hab bei mir einzelne Knöpfe, die beim drücken ein IKO hochzählen, je nach Wert des IKOs
erscheinen dann weiter Knöpfe. Gesteuert über das dynamische Design.
Nachteil der ganzen Gaudi, man muss bei jedem Knopf für jeden Wert (oder Bereich) ein dyn. Design anlegen.
Aber wenn man das mal hat, läuft das überraschend gut.. mir gefällt es.

Anbei mal ein paar Bilder...

[gkamp]

Hallo Martin,

vielen Dank für Deine schnelle Antwort und die Beispiele! Das ist auch eine interessante Idee.

Ich hoffe allerdings noch, dass es wie geplant mit einem Auf- und Zuklappen funktionieren kann. Spricht aus Eurer Sicht etwas dagegen? Sollte doch auch "nur" css und Javascript sein, oder?

VG,
Flo

[Brick]

Aufklappen geht auch.. mit ∆x bzw. ∆y in den dynamischen Designs..
Da sliden dann eben die Menüpunkte nach unten weg und neue tauchen auf..
Da muss man sich halt etwas spielen.

Gruß Martin

[Janncsi]

Aufklappen geht auch.. mit ∆x bzw. ∆y in den dynamischen Designs..
Da sliden dann eben die Menüpunkte nach unten weg und neue tauchen auf..
Da muss man sich halt etwas spielen.

Gruß Martin

Danke Martin für den Tipp. Ich verwende alles mögliche per dynamischem Design, aber ∆x bzw. ∆y zu nutzen, da bin ich gedanklich nie gewesen.

Hast du noch irgendein erase-in-out oder so mit eingefügt, damit die Bewegung flüssig verläuft?

[MrIcemanLE]

Das kann man ganz unten in der CSS-Eigenschaft mitgeben. Habe das bei meinen Buttons gemacht, um das Umschalten zu animieren. Allerdings wirkt sich das auch im Visueditor aus, was das Verschieben der Elemente erschwert.

2019-01-18 14_37_40-EDOMI · Administration.png
p.s. Was die Parameter im einzelnen bewirken, weiß ich gerade nicht mehr. Hab den Schnipsel wahrscheinlich auch nur kopiert.

[Janncsi]

Habs hinbekommen :-) Das Schließen funktioniert noch nicht wie erhofft, liegt aber an meiner mangelnden Konzentration :-)

Menue2.gif

[lamiro]

Sehr schön, aber jetzt wirst du wohl die Einstellungen auch noch posten müssen. Danke im Voraus.

Viele Grüße,

Lars

[Janncsi]

Muss ich das? Die Erwartungshaltung hat was

Wenn ich so weit bin, dass das zuklappen auch funktioniert, werde ich es kurz zusammenfassen....

[2Fast4You78]

Coole Sache. bastel auch grad an einer neuen Visu. Bin also schwer interessiert an diesem Effekt

[gkamp]

Ein Traum :-)

Ich freu mich schon

[gkamp]

Hallo @Janncsi.

Könntest Du bei Gelegenheit noch Deine Erfahrung und Einstellungen zum "Akkordeon-Effekt" schreiben? Dass was Du da zeigst, ist genau das was ich mir vorgestellt hatte. Würde mir sehr helfen.

Danke im voraus und viele Grüße,
Flo

[LostWolf]

Habs hinbekommen :-) Das Schließen funktioniert noch nicht wie erhofft, liegt aber an meiner mangelnden Konzentration :-)

Menue2.gif

Es wird Zeit, dass du dein Projekt doch einmal (als Gerüst natürlich) uns zur Verfügung stellst.
Auch bei der teilweisen starken Konkurrenz hier doch mit die Visu, die ich optisch am besten finde.

Sorry für das OT

[Marha]

Aufklappen geht auch.. mit ∆x bzw. ∆y in den dynamischen Designs..
Da sliden dann eben die Menüpunkte nach unten weg und neue tauchen auf..
Da muss man sich halt etwas spielen.

Gruß Martin

Brick hat ja hier schon den entscheidenden Hinweis gegeben, wie sich Menüs z.B. nach unten aufklappen. Leider ist der Groschen bei mir noch nicht gefallen. Vielleicht kann mir hier jemand noch einen weiteren Hinweis geben.

[Janncsi]

Es wird Zeit, dass du dein Projekt doch einmal (als Gerüst natürlich) uns zur Verfügung stellst.
Auch bei der teilweisen starken Konkurrenz hier doch mit die Visu, die ich optisch am besten finde.

Sorry für das OT

Ich liebe dieses fordernde Verhalten...

Marha

Du musst einen auslösendes Universalelement haben, welches dir auf ein iKO einen Wert sendet und andere Universalelemente musst du auf Basis dessen dann in dynamischen Designs sowohl in der Opcaität, als auch der Positionierung relativ steuern.
Damit das ganze dann am Ende flüssig wirkt noch folgenden CSS-Eintrag machen:

-webkit-transition: ease-in-out 0.5s; -webkit-transition-delay: 350ms;

Für das Aufklappen oder aufeinanderfolgende Öffnen muss man nun noch mit dem Delay spielen. Mein Delay ist in 50ms-Schritten angegeben.