Material Design Projects – Off Canvas Menu
Material Design Off Canvas Menu
- 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
This project makes use of a few modern techniques:
- Transitions, transforms, and animations
- Transition events
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, http://www.opensource.org/licenses/mit-license.php
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.