bux
/
tracim_v2


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
							<!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>