Hamburger Icon

---

Hamburger Icon refers to a series of animated burger icons with different transitions.

See inspiring source.

---

Structure

This is the structure of a hamburger icon:

Copy
<a href="" class="hamburger">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>

Trigger

The triggers that animate the hamburger icon are .active and .is-active.

Copy
<a href="" class="hamburger active">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>
<a href="" class="hamburger is-active">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
</a>

Transition Effect

Transition effects are the following:

• 3DX - applying class .hamburger-3dx
• 3DX Reverse - applying class .hamburger-3dx-r
• Arrow - applying class .hamburger-arrow
• Arrow Right - applying class .hamburger-arrow-r
• Arrow Alt - applying class .hamburger-arrow-alt
• Arrow Alt Right - applying class .hamburger-arrow-alt-r
• Collapse - applying class .hamburger-collapse-r
• Elastic - applying class .hamburger-elastic
• Elastic Reverse - applying class .hamburger-elastic-r
• Emphatic - applying class .hamburger-emphatic
• Emphatic Reversed - applying class .hamburger-emphatic-r
• Slider - applying class .hamburger-slider
• Slider Reversed - applying class .hamburger-slider-r
• Spring - applying class .hamburger-spring
• Spring Reversed - applying class .hamburger-spring-r
• Stand - applying class .hamburger-stand-r
• Stand Reversed - applying class .hamburger-stand-r
• Spin - applying class .hamburger-spin
• Spin Reversed - applying class .hamburger-spin-r
• Sqeeze - applying class .hamburger-squeeze
• Vortex - applying class .hamburger-vortex
• Vortex Reversed - applying class .hamburger-vortex-r

Customizations

To customize the hamburger icon you can change the variables from hamburger.variables file:

• @hamburgerSliceHeight
• @hamburgerSliceWidth
• @hamburgerSliceBorderRadius
• @hamburgerSliceGap

---