Off-Canvas Menu Effects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.
Off-Canvas Menu Effects

From our sponsor: Experience a seamless creation process from concept to production with advanced design features on Editor X.

Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. Different layouts and synced transitions of the menu and the page can make everything look more interesting and we can make use of the available space for side-menus and controls. SVG allows us to play with organic shapes and add some unexpected and stylish moves to a design.

We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help of Snap.svg. We also use Font Awesome and the profile picture is from the Random User Generator.

Please note that the effects serve as inspiration and will work (best) in modern browsers.

Let’s take a look at some of the styles.

This first demo is inspired by the Dribbble shot Old Designspiration Menu Concept One by Michael Martinho.

The idea behind the corner box effect is to translate an off-canvas box into the viewport while moving the content to the opposite corner, too, creating a window-like effect.

Following the simple corner box, we can think of another “layer” that will move on top of the previous box and that will make the content translate another “step”.

This menu expands from the menu button itself, taking up a space that was revealed by pushing down the content of the page. You might have seen this effect on a sidebar in one of our Morphing Buttons demos.

This menu is not an off-canvas one, but more like an expanding box with a content overlay. Here we use a jelly-like animation created with bounce.js.

This demo is using Snap.svg for animating SVG paths. Using a combination of a morphing wave with delayed menu item appearances, an organic feel is created.

We hope you enjoyed the effects and get inspired!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 90

Comments are closed.
  1. Really inspirational but what if i want to use in working website, might be difficult to make mobile compatible!

  2. Hi, great article and demos! I used and tweaked one of your demos on my website (top expand example). I’ve noticed in demos that the page scrolls right back to the top of the page, after refresh. I see you’re using overflow-y: scroll; for .content-wrap… I tried few ways of fixing, so the page stays at the same point after refresh, but nothing works. Do you have any ideas for a quick fix? I don’t want to use JS for this. Thank you!

  3. Hi there, it looks awesome, exactly what i was looking for 🙂

    I encountered a few problems though, hopefully someone can help me out. Bear with me, i’m still learning css 😉

    1. I would like to have a centered div where I put the contents of the website (1200px for example) (div class ‘content’ in demo) but then the overlay is only working on that div. I want it to cover everything but the menu itself and a fixed header.

    2. I added a jquery plugin ( because my menu is pretty long and on a phone you would have to scroll, but somehow it messes up everything. I noticed I could scroll the content itself but saw no scrollbar. I tried several things but I couldn’t work it out.

    3. I couldn’t get the ‘x’ (to close) to hover in a certain color.

    Thanks in advance!

  4. Any chance of pointing me at the installation instructions…I have searched high and low. Site reports a missing template when I load it into the themes dir

  5. exceptional work !, can somebody help me with the bubble effect , i want to move the button and transition to the right side. The button should be on the right top and when i click on it the panel should open from right to left on the right side of the screen.

    Thank you

  6. First thank you for this great work.

    I am using side slide and i want to show menu first 3 second on page load and then hide it.How can i do it?

    Thank you

  7. hi

    You’re the best!
    can please me out how regular navigation with multiple nested LIST items for the slider canvas off menu


  8. These menu effects look great! Can anyone help me in how to use one of these in WordPress? Thanks!

  9. I feel like I am missing something… I love the menu but how am I missing the tutorial : /