Slidedown - Visibility bei 2 divs

[Pixel-Wizard]

Hallo zusammen

Ich arbeite gerade an einem neuen UI. Wie es momentan aussieht könnt ihr unter http://www.tdpbeta.freeiz.com nachschauen.

Momentan ist es folgendermassen aufgebaut.

Es gibt ein div1 welches das bild beinhaltet, ein div2 welches runterslidet und ein div3 welches das div2 überdeckt. Falls das div2 nun runterslidet, verlässt es den div3-Bereich und wird über dem div1 sichtbar.

Mit meiner momentanigen Lösung klappt es nur in der ersten Reihe, sobald aber eine weitere Reihe dazu kommt, kann ich's vergessen, da das div3 nicht die gleiche Grösse wie das div2 hat und weil es Komplikationen mit dem z-index gibt.

Ich habe mir überlegt, dass man es so lösen könnte, dass das div2 erst sichtbar wird (visibility: visible) wenn es über div1 ist. So würde div3 wegfallen und alles wäre viel einfacher. Doch ist es auch möglich nur einen Teil des divs sichtbar zu machen (also der Teil der momentan über div1 ist)?

Kurz zusammengefasst:

Div2 soll sichtbar werden wenn es über div1 ist.

Liebe Grüsse
Pixel-Wizard

 

[Tronjer]

Hallo zusammen

Ich habe mir überlegt, dass man es so lösen könnte, dass das div2 erst sichtbar wird (visibility: visible) wenn es über div1 ist. So würde div3 wegfallen und alles wäre viel einfacher. Doch ist es auch möglich nur einen Teil des divs sichtbar zu machen (also der Teil der momentan über div1 ist)?

Kurz zusammengefasst:

Div2 soll sichtbar werden wenn es über div1 ist.

Liebe Grüsse
Pixel-Wizard

Verstehe ich ehrlich gesagt nicht. Du brauchst zwei Elemente, ein Parent- und ein Child-Div mit Liste. Das Child wird durch einen negativen Wert für margin außerhalb des sichtbaren Bereichs verschoben und beim Hovern per transition nach unten gefahren. Insofern stimmt dein Ansatz. Das dritte Div hingegen ist meiner Meinung nach unnötig.

Ich hatte für so ein Transition-Menü, wenn auch in einer komplexeren Variante, mal ein Tutorial veröffentlicht. Vielleicht hilft dir das ja.

Flipping Card Navigation Tutorial

 

[Pixel-Wizard]

Verstehe ich ehrlich gesagt nicht. Du brauchst zwei Elemente, ein Parent- und ein Child-Div mit Liste. Das Child wird durch einen negativen Wert für margin außerhalb des sichtbaren Bereichs verschoben und beim Hovern per transition nach unten gefahren. Insofern stimmt dein Ansatz.

Jep das ist klar. Das Problem ist, das ich möchte das wenn das div2 über div1 fährt (und 60% in div1 sind und 40% nicht), die 60% visible und die 40% invisible sind da sich diese ja ausserhalb befinden. Wie ist das möglich?

Das dritte Div hingegen ist meiner Meinung nach unnötig.

Genau dies ist ja der Punkt. Das dritte div kann höchstens in der ersten Zeile gebraucht werden. Dies will ich eben abschaffen und probieren es mit visibility zu lösen. Das wenn div2 über div1 ist nach und nach das Bild sich zeigt, der Teil ausserhalb jedoch weiterhin invisible bleibt.

Ich hatte für so ein Transition-Menü, wenn auch in einer komplexeren Variante, mal ein Tutorial veröffentlicht. Vielleicht hilft dir das ja.

Tut mir leid aber das hilft mir leider auch nicht. Das Banner (also der graue Bereich oben), wäre bei mir div3. Die divs verstecken sich ja dahinter.

 

[Tronjer]

Jep das ist klar. Das Problem ist, das ich möchte das wenn das div2 über div1 fährt (und 60% in div1 sind und 40% nicht), die 60% visible und die 40% invisible sind da sich diese ja ausserhalb befinden. Wie ist das möglich?

So out-of-the-box mit CSS imho gar nicht. Man könnte höchstens über das Attribut transition einen workaround mit timing bauen. Aber das würde mit dem Background wohl nicht funktionieren.

Auf Anhieb sehe ich da nur zwei Ansätze. Entweder bleibst du bei den 3 Divs und belegst die Klasse .parent mit einem overflow: hidden. Dann muss der Content nicht "versteckt" werden. Oder du machst es mit jQuery.

 

[Pixel-Wizard]

Wie würde das bei jQuery funktionieren? Ein Lösungsansatz würde reichen...

 

[Tronjer]

Beim Gedanken an jQuery ist mir noch etwas anderes eingefallen. Lege zwei Blockelemente genau übereinander. Das untere bekommt das Image, das obere die Liste und dazu ein height: 0. Mit transition wird im Hover-Zustand dann die height auf die Höhe des unteren Divs gesetzt.

jQuery funktioniert auch nicht viel anders, arbeitet dafür aber im IE < 10.

 

[Pixel-Wizard]

GENIALER EINFALL!! Wieso bin ich nicht früher draufgekommen.

Einfach super. So geht es viel einfacher und nichts muss verschoben werden. Auch javascript muss so nicht eingesetzt werden.

Danke vielmals!!!