Sidr - A jQuery plugin for creating side menus

http://www.berriart.com/sidr/#usage

by pajju • 13 years ago

112 18 13 years ago

start123• 13 years ago

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.

ricardobeat2• 13 years ago

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

ricardobeat2• 13 years ago

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• 13 years ago

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

futhey• 13 years ago

mmm, Cider...

LAMike• 13 years ago

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• 13 years ago

Modern browsers can hardware-accelerate CSS animations. http://blog.teamtreehouse.com/increase-your-sites-performanc...

dbushell2• 13 years ago

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

ajanuary• 13 years ago

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

manojlds• 13 years ago

The page was such a mess to use on my iPad

dbushell2• 13 years ago

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

augustflanagan• 13 years ago

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.

jacquesc• 13 years ago

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

peachananr• 13 years ago

Now, this is useful for responsive design. :)

pests• 13 years ago

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.

mistercow• 13 years ago

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

michaelmartin• 13 years ago

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.

tegansnyder• 13 years ago

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

Sidr - A jQuery plugin for creating side menus

Related Stories