Sidr - A jQuery plugin for creating side menus

by pajju on 3/31/2013, 7:22 AM with 18 comments
  • by ricardobeat on 3/31/2013, 8:08 AM

    How do you close it?

    Taking a look at the source, it should use CSS translateY instead of javascript animation, would perform much better specially on mobile devices.

  • by dbushell on 3/31/2013, 10:16 AM

    jQuery animate is terrible for performance. The demo lags at a few frames per second (and I'm testing on a Nexus 4).

    CSS transitions are the method for this. Not without their own caveats, but usable. I've written extensively on the subject with this exact implementation of an off-canvas menu: http://coding.smashingmagazine.com/2013/01/15/off-canvas-nav...

  • by start123 on 3/31/2013, 7:55 AM

    The plugin currently shifts the main content pane to the right. It would be great if it could reduce its width instead, so the entire content can fit in the screen.

  • by jacquesc on 3/31/2013, 10:38 AM

    This looks pretty good. Currently using http://jpanelmenu.com/, though I'll have to try this one out to see how it compares.

  • by ajanuary on 3/31/2013, 9:07 AM

    On mobile safari it seems to keep opening and closing the menu as I scroll, seemingly randomly.

  • by tegansnyder on 3/31/2013, 2:37 PM

    I built a few different approaches to do these menus a while back. Mostly intended to be used on Phonegap applications where you can restrict the web view bounce. Yours look way more configurable but if anyone is interested in a Zepto.js version: https://github.com/tegansnyder/Zepto-Mobile-Slide-Menu I also have a JQuery version: https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu and a neat little dropdown from top version: https://github.com/tegansnyder/CNN-Like-Swipe-From-Top-Menu-...

  • by LAMike on 3/31/2013, 9:00 AM

    Hey, this is exactly what I was looking for! Thanks. Can someone explain why css animations are more efficient than javascript animations? Or is it just a matter of preference

  • by michaelmartin on 3/31/2013, 11:49 AM

    It's cool to see more libraries appearing for this effect. I think it's really nice on the responsive demo at least.

    It does beg some questions about using it in non-touch scenarios though. The experience with a mouse isn't the best right now because everything moves.

    Would be curious about the menu having a close button of its own, in the exact same position that the "Menu" you would have clicked to open it was in.

  • by mistercow on 3/31/2013, 11:34 AM

    Pretty neat. What would be especially useful would be if you could support nested lists for creating submenus.

  • by on 3/31/2013, 8:58 AM

    undefined

  • by peachananr on 3/31/2013, 10:40 AM

    Now, this is useful for responsive design. :)

  • by futhey on 3/31/2013, 8:41 AM

    mmm, Cider...