CSS Off-Canvas Menu Effects

  • Download
  • Source
  • Flag
  • Apr 8, 2015

A compelling set of effects for off-canvas menus. It uses different layouts and transitions, making the overall page look awesome and coordinated, making space for actionable items in the menu and controls.

These effects were made using CSS transitions, CSS animations made with bounce.js, and animated SVGs using Snap.svg. Additionally, the font icons used were from Font Awesome and the random users from Random User Generator. The menu effects are:

– Top side
– Side slide
– Corner box
– Nested corner box
– Top expand
– Corner morph
– elastic
– Bubble
– Wave

This tutorial + code snippet was created by Mary Lou from Codrops.

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator