HTML
<div class="hamburger hamburger--3dx">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--3dx</code>
<br>
<div class="hamburger hamburger--3dx-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--3dx-r</code>
<br>
<div class="hamburger hamburger--3dy">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--3dy</code>
<br>
<div class="hamburger hamburger--3dy-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--3dy-r</code>
<br>
<div class="hamburger hamburger--3dxy">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--3dxy</code>
<br>
<div class="hamburger hamburger--3dxy-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--3dxy-r</code>
<br>
<div class="hamburger hamburger--arrow">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--arrow</code>
<br>
<div class="hamburger hamburger--arrow-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--arrow-r</code>
<br>
<div class="hamburger hamburger--arrowalt">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--arrowalt</code>
<br>
<div class="hamburger hamburger--arrowalt-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--arrowalt-r</code>
<br>
<div class="hamburger hamburger--arrowturn">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--arrowturn</code>
<br>
<div class="hamburger hamburger--arrowturn-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--arrowturn-r</code>
<br>
<div class="hamburger hamburger--boring">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--boring</code>
<br>
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--collapse</code>
<br>
<div class="hamburger hamburger--collapse-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--collapse-r</code>
<br>
<div class="hamburger hamburger--elastic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--elastic</code>
<br>
<div class="hamburger hamburger--elastic-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--elastic-r</code>
<br>
<div class="hamburger hamburger--emphatic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--emphatic</code>
<br>
<div class="hamburger hamburger--emphatic-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--emphatic-r</code>
<br>
<div class="hamburger hamburger--minus">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--minus</code>
<br>
<div class="hamburger hamburger--slider">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--slider</code>
<br>
<div class="hamburger hamburger--slider-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--slider-r</code>
<br>
<div class="hamburger hamburger--spin">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--spin</code>
<br>
<div class="hamburger hamburger--spin-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--spin-r</code>
<br>
<div class="hamburger hamburger--spring">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--spring</code>
<br>
<div class="hamburger hamburger--spring-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--spring-r</code>
<br>
<div class="hamburger hamburger--stand">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--stand</code>
<br>
<div class="hamburger hamburger--stand-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--stand-r</code>
<br>
<div class="hamburger hamburger--squeeze">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--squeeze</code>
<br>
<div class="hamburger hamburger--vortex">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--vortex</code>
<br>
<div class="hamburger hamburger--vortex-r">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<code>hamburger--vortex-r</code>
CSS
{ } JS
/**
* forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options
*
* @private
* @author Todd Motto
* @link https://github.com/toddmotto/foreach
* @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList
* @callback requestCallback callback - Callback function for each iteration.
* @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.
* @returns {}
*/
var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
var hamburgers = document.querySelectorAll(".hamburger");
if (hamburgers.length > 0) {
forEach(hamburgers, function(hamburger) {
hamburger.addEventListener("click", function() {
this.classList.toggle("is-active");
}, false);
});
}
Preview