Sidr - A jQuery plugin for creating side menus(berriart.com)
berriart.com
Sidr - A jQuery plugin for creating side menus
http://www.berriart.com/sidr/#usage
19 comments
I agree! Mobile performance on my iPhone 5 is a bit jarring, definitely look into the use of CSS Transforms instead.
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...
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...
This article was great! I had implemented a side menu on my own a couple of days before this came out. It was using css transitions on the width property which was fine on desktop, but clunky on mobile. I re-worked it following your approach and was really happy with the results.
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.
This type of menu is supposed to be transient, closing after a click, but this doesn't seem to be working on desktop.
This looks pretty good. Currently using http://jpanelmenu.com/, though I'll have to try this one out to see how it compares.
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-...
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
Modern browsers can hardware-accelerate CSS animations. http://blog.teamtreehouse.com/increase-your-sites-performanc...
jQuery animate (and any JS animation) iterates over CSS properties by updating an elements style attribute. Updating the DOM at this rate forces repaint/reflows and is rarely going to perform well.
CSS transitions/transforms let the browser render once on separate layers. The animation frames can then be composited faster (and accelerated on the GPU).
Paul Irish has a great demo: http://paulirish.com/2012/why-moving-elements-with-translate...
CSS transitions/transforms let the browser render once on separate layers. The animation frames can then be composited faster (and accelerated on the GPU).
Paul Irish has a great demo: http://paulirish.com/2012/why-moving-elements-with-translate...
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.
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.
Pretty neat. What would be especially useful would be if you could support nested lists for creating submenus.
[deleted]
Now, this is useful for responsive design. :)
Although I'm not sure if the responsive term is meant to include desktop resizes, nor if it is just a problem on the site itself (which is a problem in itself); the site includes both top and side menu when going from a small browser window to a big one.
mmm, Cider...
Taking a look at the source, it should use CSS translateY instead of javascript animation, would perform much better specially on mobile devices.