
Sidr - A jQuery plugin for creating side menus - pajju
http://www.berriart.com/sidr/#usage
======
ricardobeat
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.

~~~
amarco
I agree! Mobile performance on my iPhone 5 is a bit jarring, definitely look
into the use of CSS Transforms instead.

------
dbushell
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...](http://coding.smashingmagazine.com/2013/01/15/off-canvas-
navigation-for-responsive-website/)

~~~
augustflanagan
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.

------
start123
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.

~~~
ricardobeat
This type of menu is supposed to be transient, closing after a click, but this
doesn't seem to be working on desktop.

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

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

~~~
manojlds
The page was such a mess to use on my iPad

------
tegansnyder
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-...](https://github.com/tegansnyder/CNN-Like-Swipe-From-Top-Menu-
Zepto.js-Mobile-HTML5)

------
LAMike
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

~~~
quarterto
Modern browsers can hardware-accelerate CSS animations.
[http://blog.teamtreehouse.com/increase-your-sites-
performanc...](http://blog.teamtreehouse.com/increase-your-sites-performance-
with-hardware-accelerated-css)

------
michaelmartin
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.

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

------
peachananr
Now, this is useful for responsive design. :)

~~~
pests
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.

------
futhey
mmm, Cider...

