You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
320 lines
6.9 KiB
320 lines
6.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Hamburgers by Jonathan Suh</title>
|
|
<link rel="stylesheet" href="hamburgers.css">
|
|
<style>
|
|
code {
|
|
display: inline-block;
|
|
}
|
|
|
|
code,
|
|
.hamburger {
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<script>
|
|
/**
|
|
* 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);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|