isnan909 / animating-hamburger-icons

Animating CSS-only hamburger menu icons

Animating CSS-Only Hamburger Menu Icons

A collection of animating CSS-only hamburger menu icons. View demo here.

Usage - CSS or Sass

You can use as is and configure the CSS manually, or you can make use of the Sass file and the configuration block. Here's the config options:

$button-width: 96px;                    // The width of the button area
$button-height: 96px;                   // The height of the button area
$bar-thickness: 8px;                    // The thickness of the button bars
$button-pad: 18px;                      // The left/right padding between button area and bars.
$button-bar-space: 12px;                // The spacing between button bars
$button-transistion-duration: 0.3s;     // The transition duration

License

Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php

Copyright 2014, Call Me Nick

http://callmenick.com

Live Demo

View the live demo here.