Animated Hamburger Toggle Icons In Pure CSS – hamburgers.css

Category: CSS & CSS3 , Recommended | December 4, 2018
Author: jonsuh
Views Total: 4,077
Official Page: Go to website
Last Update: December 4, 2018
License: MIT

Preview:

Animated Hamburger Toggle Icons In Pure CSS – hamburgers.css

Description:

hamburgers.css helps you create various types of CSS3 animated toggle icons for hamburger navigation toggles.

Basic usage:

Just include the hamburgers.css in the head section of the webpage and done.

<link href="dist/hamburgers.css" rel="stylesheet">

The basic html structure for the hamburger toggle icon.

<div class="hamburger">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Add the CSS class of your choice to the hamburger toggle icons. Available classes:

  • hamburger–3dx
  • hamburger–3dx-r
  • hamburger–3dy
  • hamburger–3dy-r
  • hamburger–3dxy
  • hamburger–3dxy-r
  • hamburger–arrow
  • hamburger–arrow-r
  • hamburger–arrowalt
  • hamburger–arrowalt-r
  • hamburger–arrowturn
  • hamburger–arrowturn-r
  • hamburger–boring
  • hamburger–collapse
  • hamburger–collapse-r
  • hamburger–elastic
  • hamburger–elastic-r
  • hamburger–emphatic
  • hamburger–emphatic-r
  • hamburger–minus
  • hamburger–slider
  • hamburger–slider-r
  • hamburger–spin
  • hamburger–spin-r
  • hamburger–spring
  • hamburger–spring-r
  • hamburger–stand
  • hamburger–stand-r
  • hamburger–squeeze
  • hamburger–vortex
  • hamburger–vortex-r
<div class="hamburger hamburger--collapse">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Add the CSS class ‘is-active’ to the toggle icon to make it active.

<div class="hamburger hamburger--collapse is-active">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

Changelog:

v1.1.2 (12/04/2018)

  • Fixed: !important for types that rely on background-color: transparent.
  • Fixed: Change default value of $hamburger-active-hover-opacity to $hamburger-hover-opacity.
  • Fixed: Change default value of $hamburger-active-hover-filter to $hamburger-hover-filter.
  • Fixed: Removed $hamburger-hover-transition-duration and $hamburger-hover-transition-timing-function—types rely on custom timing, which render these useless.
  • Added: Changing color of the hamburger in the active state

v0.9.3 (08/13/2018)

  • Added new types

You Might Be Interested In:

Leave a Reply