Hamburger Icon
A collection of mixins for creating hamburger icons.
Basic idea — Sass Burger.
Support
Support for all popular css preprocessors: Less, Sass and Stylus.
Installation
- Download the files you need from the this repository;
- Bower:
$ bower install hamburger-icon --save
; - Git:
$ git clone git://github.com/mrmlnc/hamburger-icon.git
;
Then just import the file, whitch includes variables colors in your project.
Less:
@import "lib/hamburger-icon";
Sass:
@import "lib/hamburger-icon"
Stylus:
@import "lib/hamburger-icon"
If you use Bower, the path would be:
bower_components/hamburger-icon/..
Settings
You can change the settings:
- width — default: 32px;
- height — default: 3px;
- gutter — default: 5px;
- color — default: #000;
- border-radius — default: 0;
- duration — default: .3s;
- timing-function — default: ease;
How to use
HTML:
<button class="navigation-toggle" data-tools="collapse" data-target="#globalNavbar"> <span class="menu-icon"></span></button>``` **Less:** Required mixin of settings `.hamburger-settings()`. ````Less.hamburger-settings(24px, 3px, 5px, #777, @timing-function: linear); .menu-icon { .hamburger-generator();} .navigation-toggle { &.active .menu-icon { .hamburger-animation(); }}
SASS:
.menu-icon .navigation-toggle
Stylus:
.menu-icon hamburger-generator(24px, 3px, 5px, #777, $timing-function: linear) .navigation-toggle &.active .menu-icon hamburger-animation()
Changelog
See the Releases section of our GitHub project for changelogs for each release version.
License
This software is released under the terms of the MIT license.