Animated hamburger icon mixin (Sass/Stylus/LESS)

Hamburger menu mixins utilizing the checkbox hack so you can use CSS only to show a mobile menu (or off-canvas menu, etc).

Unlike other mixins here you can specify a selector for the label tag if it's not directly below the checkbox, so the label (the icon) can be placed anywhere in the DOM.

It is also possible to add text, either on the left or right side.

There is also a "hamburger_tint" helper mixin included to easily colorize the icon/text on hover or in a checked state.

Demo

Sass Stylus LESS

Usage

Markup

Icon only:

<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle"><i></i></label>

Icon + text:

<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle"><i></i><span>Menu</span></label>

Calling the mixin

Sass

// defaults
#menu-toggle {
  @include hamburger();
}

// some parameters + tint on hover
#menu-toggle {
  @include hamburger($width: 24px, $thickness: 2px, $gap: 5px, $color: lightgray, $padding: 24px);
  &:hover {
    @include hamburger_tint(orange);
  }
}

Stylus

// defaults
#menu-toggle
  hamburger()

// some parameters + tint on hover
#menu-toggle
  hamburger(width: 24px, thickness: 2px, gap: 5px, color: lightgray, padding: 24px)
  &:hover
    hamburger_tint(orange)

LESS

// defaults
#menu-toggle {
  .hamburger();
  }
}

// some parameters + tint on hover
  .hamburger(@width: 24px, @thickness: 2px, @gap: 5px, @color: lightgray, @padding: 24px);
  &:hover {
    .hamburger_tint(orange);
  }
}

Parameters:

width: the width of the icon. default: 32px
thickness: the thickness of the bars. default: 3px
gap: the vertical space between the bars. Overall height is: thickness x 3 + gap x 2. default: 7px
color: the color of the icons. default: #000 (black)
background: solid background-color of the icon, should be used together with padding. default: transparent
tint_text: whether to colorize the text with the value set in color. default: false
radius: border-radius value to round edges. default: 0
radius_background: border-radius of the bounding rectangle. Visible only if background is not transparent. default: 0
anim: seconds of animation duration (transition-duration) or timing function + duration (eg. "ease-out 0.3s"). Use -1 to disable morphing to an "X". default:0.25s
labelselector: in case the label is not directly after the checkbox, use this setting to tell the mixin where to find it. Eg. "~ div.content header nav label". default: "+ label"
padding: extra spacing around the icon. default: 0
text: show text next to the icon, by default on the right. Values: "left" or false to disable .Requires an extra "span" tag. default: "right"
style: the middle bar can be set shorter and aligned to right or left by setting style to "align-right" or "align-left". false

rolandtoth / hamburger-mixin