I'm working on the UI for an iOS 7 app, and the drawer menu interaction isn't suitable for iOS 7. I'm trying to redesign the drawer to something like this: http://cdn1.dribbble.com/users/221741/screenshots/1154748/attachments/149461/whatsapp-ios7-sidemenu.png
When the drawer menu shows up, it adds some CSS3 transform3d property to the view which is open. I was able to modify the behavior by overriding the style using "!important, but the animation is kinda jaggy, and want to know if there is a better way to do this.
Example of what I'm trying to do: http://jsfiddle.net/thilak/kk83s/
When the drawer menu shows up, it adds some CSS3 transform3d property to the view which is open. I was able to modify the behavior by overriding the style using "!important, but the animation is kinda jaggy, and want to know if there is a better way to do this.
Example of what I'm trying to do: http://jsfiddle.net/thilak/kk83s/
5 Answers, 1 is accepted
0
Hello Purna,
Petyo
Telerik
The jsfiddle link seems to be empty (the service experiences availability problems recently). Can you please try to re-post it? Thank you in advance.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Anatoli
Top achievements
Rank 1
answered on 15 Nov 2013, 01:37 PM
Here's the example again: http://jsfiddle.net/thilak/7ubkr/
0
Hello Purna,
Petyo
Telerik
It seems like I am missing something. The jsfiddle does not contain the CSS override you refer to in your initial post.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Anatoli
Top achievements
Rank 1
answered on 21 Nov 2013, 06:09 AM
Ouch! How can I get it wrong twice in a row? Here it is - http://jsfiddle.net/thilak/gu9Xj/2/
0
Accepted
Hi,
Thank you for the provided link. I can verify that your approach is, in fact, the most optimal (while also being the simplest). Unfortunately, the animation performance depends on the device capabilities and the size of the animated element. Scaling the whole view down is an expensive task, which most probably won't be very smooth on a mobile device.
Regards,
Petyo
Telerik
Thank you for the provided link. I can verify that your approach is, in fact, the most optimal (while also being the simplest). Unfortunately, the animation performance depends on the device capabilities and the size of the animated element. Scaling the whole view down is an expensive task, which most probably won't be very smooth on a mobile device.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!