Creating a collapsible sidebar

over 6 years ago from Sam Willis, Product Designer at Memrise, Organiser of Design Club.

Hey guys,

So I am building a page which needs a collapsible sidebar - like this one on http://squarespace.com/stories - but I am not sure what would be considered 'best practice' in doing this.

My thoughts first went to absolutely positioning the menu just off screen, and animating it in with JS, but I wondered if there was a better way? Or indeed a plugin or template that has tackled this particularly well?

Thank you for your time!

Sam.

13 comments

Lucas Motta, over 6 years ago (edited over 6 years ago )
I don't think any plugin to do that. You can make all the transitions in the CSS and just use JavaScript to activate the class that brings the navigation to the front:
$(".nav).toggleClass(".nav--active");
And on your CSS:
.nav { position: absolute; top: 0; right: 0; width: 200px; transform: translate(200px, 0px); transition: all 1s ease-out; } .nav--active { transform: translate(0px, 0px); }
Just don't forget to set the containers to overflow: hidden.
7 points
- Ignacio Palomo Duarte, over 6 years ago
  I've been using exactly this approach, and the main benefit is performance: CSS3 translate will use GPU and the animation will be smooth [1]
  [1] http://www.html5rocks.com/en/tutorials/speed/high-performance-animations
  3 points
- Simon Brown, over 6 years ago
  Translates will look the best and be the most smooth but won't work on IE8 so depending on your user base it could be worth having a graceful fallback. Not being able to access the menu isn't great for those with older browsers.
  0 points
  - Lucas Motta, over 6 years ago (edited over 6 years ago )
    If you are targeting IE8, usually you should have a separated StyleSheet for it. So there you could override the transform to use the right property instead.
    IE8.css
    .nav { right: -200px; } .nav--active { right: 0; }
    And I think IE users won't expect this to be animated anyway :)
    1 point
Conlin "Wuz" Durbin, over 6 years ago (edited over 6 years ago )
If you wanna get a little hacky, this is also achievable using only HTML5 and CSS3. Examplehttp://codepen.io/conlindurbin/full/rIxEa
3 points
Nick Tassone, over 6 years ago (edited over 6 years ago )
Snap.js has worked out really well for me in the past. If you want it to work with a swipe on mobile it does the trick.
3 points
- Varun Vachhar, over 6 years ago
  Same here.
  It has near perfect finger tracking, drag handles, tap to close, left and right drawers – basically everything you need to build a drawer navigation.
  1 point
Moiz K. Malik, over 6 years ago
Foundation includes a side-menu: http://foundation.zurb.com/docs/components/offcanvas.html
3 points
Tiago Duarte, over 6 years ago
Yap, absolute positioning the menu and then controlling it with JS is probably the best method. It's also versatile enough to be responsive easily.
If you wish to use a plugin, Sidr seems to be what you're looking for :)
2 points
Julian N, over 6 years ago
Codrops has a cool tutorial on different types of off-canvas navigations: http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
1 point
Gabriel Stevano, over 6 years ago
I have read a suggestion to use translate3d rather than absolute position. I just forgot where. It seems paul irish article.
0 points
Javan Griffiths, over 6 years ago
If you interested in learning about how to create an off-canvas nav then check out this article it's relatively easy to follow through and is built using progressive enhancement so it gracefully degrades.
Also check out the Effeckt.css project although there is still some work to be done till it's ready for prime time, there is a section called 'Off Screen Nav' that shows a tone of different ways to implement Off Screen Navs.
Javan.
0 points
Oscar Waczynski, over 6 years ago
This one is pretty damn good and really fluid on mobile. Best I've seen out there... https://github.com/jakiestfu/Snap.js/
0 points

Designer News

Join Us

Creating a collapsible sidebar

13 comments

Join Us

Login to Comment

Register Today