Wednesday, 3 February 2016

Material Design Projects – Off Canvas Menu

In this project, I've built a concept for an off canvas menu inspired by Google's material design, using HTML, CSS, and JavaScript.
Material Design Projects – Off Canvas Menu

Material Design Off Canvas Menu

This project was build using front end technologies, HTML5, CSS3, and JavaScript, to generate an off-canvas menu based on material design principles. It contains four main features:
  • Animated toggle button
  • Animated off canvas menu
  • Animated Menu Items
  • Touch/click ripple effect

1 – Animated Toggle Button

The animated toggle button is a neat button created with pure CSS. It’s a hamburger icon by default, and animates into an arrow (indicating a close button) when the menu is active/open.

2 – Animated Off Canvas Menu

The menu is initially hidden from view, and when the toggle switch is hit, it animates into view. It bumps the main content to the side, and also adds a mask over it. Clicking the mask or the toggle switch again closes the menu, animating it out of view.

3 – Animated Menu Items

While the menu slides into view, each item in the menu animates into view with a slight delay. This adds a little layer of neat animation to the menu.

4 – Touch/Click Ripple Effect

The touch/click ripple effect is an effect that creates a little animation, mimicking a ripple, expanding outwards from the point of contact with the user. This effect is mentioned and displayed quite a bit in the material design spec, and I replicated it with CSS and JavaScript.


This project makes use of a few modern techniques:
  • Transitions, transforms, and animations
  • Transition events
  • The classList JavaScript method to add, remove, and check classes.
If you want full browser support, you’re going to have to implement the necessary fallbacks and polyfills.


This project was tested in the following browsers:
  • Chrome 39
  • Safari 8
  • Firefox 34
  • Internet Explorer 11
Anyone else willing to run tests in other browsers, please let me know the results! Any issues, please file them accordingly.


Licensed under the MIT license,
Copyright 2014, Call Me Nick

Keep Up On Github

This project is on GitHub, so feel free to contribute, test, write an issue, fork, clone, start, whatever, here.

Source ;