5202

ein Blog über technische Fragen zu Blogger

Blogger: Elastisches 3D Drop-Down

von
Die zwei in diesem Herbst 'erfolgreichsten' Posts vereinigt - ein elastisches Menü um eine zweite Drop-Down-Ebene erweitert.

Die Skizze funktioniert in Chrome, Safari, FF, Opera12+ und IE10 mit voller Animation.

3D Amimation

Die HTML ist die selbe wie aus dem Drop-down-Post. Die meiste CSS aus diesem Post habe ich ebenfalls wiederverwertet.

Neu ist der 3D Effekt beim Hovern - es gibt nun zwei Bewegungen in der Zeit, nämlich eine Transition der ersten Ebene und eine Animation der zweiten Ebenen. Die Animation funktioniert über ein Keyframe - in diesem Keyframe laufen drei Bezier Funktionen, die das 'nachwippen' animieren.

Falls das jemand interessiert, kann ich das natürlich auch detaillierter beschreiben - auf die Funktion bin ich a bisserl Stolz, das hat mich am meisten Zeit gekostet.

Außerdem läuft die Bewegung der zweiten Ebene um alle drei Achsen ... ist also 3D. Ihr seht das beste Ergebnis in Chrome, weil der Antilaising mit drin hat - in allen anderen Browser sollte es aber auch akzeptabel sein.

Grenze

In dieser Skizze steckt viel so Future-CSS3-Zeugs ... das ist schon a bisserl grenzwertig. Trotzdem dürft ihr das natürlich gerne ausprobieren, nehmt dafür zuerst aber einem Test-Blog.

Um dieses Drop-Down in Blogger zum laufen zu bringen, müsst ihr einen Teil der Bloggereigenen CSS korrigieren - die Werte sind für jede Vorlage anders, hier die Korrektur für die Simple-Vorlage:
.main-outer { z-index: 9 }
.tabs-outer { z-index: 10 }
.tabs-outer { overflow: visible }
.tabs .widget ul,
.tabs .widget ul { overflow: visible }
.widget .post-body li { margin-bottom: 0 }
.tabs-inner .widget ul,
.tabs-inner .widget li a,
.tabs-inner .section:first-child ul { border: none }
.tabs .widget li,
.tabs .widget li { float: none }
Achtung: Diese Korrektur ist nur für das Simple Layout gültig! Ohne entsprechende Korrektur wird das Menü in keiner anderen Blogger Vorlage funktionieren ... beziehungsweise dürft ihr das natürlich gerne ausprobieren :D

Ach ja, die CSS findet ihr im Quelltext zu der Skizze - alles zwischen "Demo CSS Start" und "Demo CSS Ende".

Und, wie findet ihr's?

Die Idee hinter der Skizze ist, durch 'Bewegung' den Besucher zum 'stillhalten' zu bringen - die ganze Animation + Transition beim Hovern dauert 1.3s und das ist in unserer ADHS-Welt schon eine halbe Ewigkeit. Das funktioniert nur, wenn die Bewegung _interessant_ ist, also der Besucher es spannend findet, nichts zu tun und nur der Bewegung zu folgen.