4 ms·

Sidr - A jQuery plugin for creating side menus

112 points by pajju 14y ago

michaelmartin 14y 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.
start123 14y 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.
- ricardobeat 14y ago
  This type of menu is supposed to be transient, closing after a click, but this doesn't seem to be working on desktop.
ricardobeat 14y 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 14y ago
  I agree! Mobile performance on my iPhone 5 is a bit jarring, definitely look into the use of CSS Transforms instead.
futhey 14y ago
mmm, Cider...
deleted 14y ago
[deleted]
LAMike 14y 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 14y ago
  Modern browsers can hardware-accelerate CSS animations. http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css http://blog.teamtreehouse.com/increase-your-sites-performanc...
- dbushell 14y 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-is-better-than-posabs-topleft/ http://paulirish.com/2012/why-moving-elements-with-translate...
ajanuary 14y ago
On mobile safari it seems to keep opening and closing the menu as I scroll, seemingly randomly.
- manojlds 14y ago
  The page was such a mess to use on my iPad
dbushell 14y 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-navigation-for-responsive-website/ http://coding.smashingmagazine.com/2013/01/15/off-canvas-nav...
- augustflanagan 14y 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 14y ago
This looks pretty good. Currently using http://jpanelmenu.com/ http://jpanelmenu.com/, though I'll have to try this one out to see how it compares.
peachananr 14y ago
Now, this is useful for responsive design. :)
- pests 14y 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 14y ago
Pretty neat. What would be especially useful would be if you could support nested lists for creating submenus.
tegansnyder 14y 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 https://github.com/tegansnyder/Zepto-Mobile-Slide-Menu I also have a JQuery version: https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu 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-Zepto.js-Mobile-HTML5 https://github.com/tegansnyder/CNN-Like-Swipe-From-Top-Menu-...

112 points by pajju 14y 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.

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

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

ricardobeat 14y 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 14y ago
I agree! Mobile performance on my iPhone 5 is a bit jarring, definitely look into the use of CSS Transforms instead.

futhey 14y ago

mmm, Cider...

deleted 14y ago

[deleted]

LAMike 14y 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 14y ago
Modern browsers can hardware-accelerate CSS animations. http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css http://blog.teamtreehouse.com/increase-your-sites-performanc...
dbushell 14y 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-is-better-than-posabs-topleft/ http://paulirish.com/2012/why-moving-elements-with-translate...

ajanuary 14y ago

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

manojlds 14y ago
The page was such a mess to use on my iPad

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

augustflanagan 14y 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 14y ago

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

peachananr 14y ago

Now, this is useful for responsive design. :)

pests 14y 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 14y ago

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

tegansnyder 14y 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 https://github.com/tegansnyder/Zepto-Mobile-Slide-Menu I also have a JQuery version: https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu 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-Zepto.js-Mobile-HTML5 https://github.com/tegansnyder/CNN-Like-Swipe-From-Top-Menu-...