This is a migrated thread and some comments may be shown as answers.

Changing Drawer Menu Behavior

5 Answers 53 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Purna
Top achievements
Rank 1
Purna asked on 11 Nov 2013, 10:33 AM
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/

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 12 Nov 2013, 04:34 PM
Hello Purna,

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
Purna
Top achievements
Rank 1
answered on 15 Nov 2013, 01:37 PM
Here's the example again: http://jsfiddle.net/thilak/7ubkr/
0
Petyo
Telerik team
answered on 19 Nov 2013, 08:56 AM
Hello Purna,

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
Purna
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
Petyo
Telerik team
answered on 22 Nov 2013, 12:57 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Drawer (Mobile)
Asked by
Purna
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Purna
Top achievements
Rank 1
Share this question
or