Website Content mit menü verschieben

[Bennyaa]

Hallo, ich habe eine sticky navbar, welche über einen button ein menü mit translate "einfliegen" lässt.
(Das Menü liegt innerhalb der navigation (damit ist es ja auch sticky) und ist absolute positioniert.
es funktioniert auch alles soweit ganz gut, ich würde gerne nur den content unterhalb des menüs mit dessen einfliegen genauso verschieben.

wie geht denn sowas? winfach den kontank darunter auch mit translate verschieben?

 

[Bagbag]

Da sich transform nicht auf das Layout auswirkt musst du das selbe entweder auch für den Inhalt machen oder aber es nicht transform, sondern mit etwas wie left oder width, das das Layout verschiebt, lösen.

 

[netzgestaltung]

also das verschieben geschieht durch das setzen des left werts. der content muß dann eben auch absolut positioniert werden. Die animation des verschiebens kommt durch transition:left ease 200ms;

 

[floq0r]

Hinweis am Rande: Im Gegensatz zu left ist transform 3D beschleunigt

 

[netzgestaltung]

die 3D Beschleunigung lässt sich aber auch mit transform: translate3d(0, 0, 0); aktivieren und für left nutzen.

generell scheint das thema bei transitions nicht mehr so dramatisch zu sein, zuletzt ist mir das nicht mehr aufgefallen das ich noch 3d beschleunigung bräuchte, hab schon lange kein ruckeln mehr gesehen. (schon aber bei jquery .slideUp/Down)

 

[floq0r]

slideUp von jQuery ist ja im Grunde nur ein Loop in dem stepwise die height geändert wird - grauslich
Performance issues hatte ich mit left auch noch nicht, könnte aber anders aussehen wenn viele transitions gleichzeitig laufen. Besser ist es man macht es gleich mit transform.