Off-Canvas Menu Effects

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

Off-Canvas Menu Effects

View demo Download source

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.

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

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

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

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

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

OffCanvasMenuEffects06
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!

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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 leanirng CSS now.

Feedback 86

  1. 1

    There’s a bug on iOS devices. The smooth scroll is disabled, because you get stuck on the page if you try to scroll with smooth scroll enabled.

Follow this discussion

Leave a Comment