Changing Drawer Menu Behavior

6 posts, 1 answers
  1. Purna
    Purna avatar
    17 posts
    Member since:
    May 2012

    Posted 11 Nov 2013 Link to this post

    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/
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Purna
    Purna avatar
    17 posts
    Member since:
    May 2012

    Posted 15 Nov 2013 Link to this post

    Here's the example again: http://jsfiddle.net/thilak/7ubkr/
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 19 Nov 2013 Link to this post

    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!
  6. Purna
    Purna avatar
    17 posts
    Member since:
    May 2012

    Posted 21 Nov 2013 Link to this post

    Ouch! How can I get it wrong twice in a row? Here it is - http://jsfiddle.net/thilak/gu9Xj/2/
  7. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 22 Nov 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready