Javascript

【Javascript】JavaScriptとCSSアニメーションのハンバーガーHambjergers

October 19, 2016
Hambjergers

最小限のJavaScriptでウェブサイトのために設計され、完全にCSSアニメーションハンバーガー

Styles

  1. Arrow – Left
  2. Arrow – Right
  3. Arrow – Up
  4. Arrow – Down
  5. Cross – Rotate
  6. Cross – Spin
  7. Cross – Circled
  8. Cross – Circled Small
  9. Cross – Fold

HTML

<link rel="stylesheet" href="hambjergers.css">
<script type="text/javascript" src="hambjergers.js"></script>
<div id="" class="hamburger-container">
    <span class="hamburger-piece"></span>
    <span class="hamburger-piece"></span>
    <span class="hamburger-piece"></span>
</div>

Framework / Create Your Own

#hamburger-custom-example .hamburger-piece:nth-of-type(#).open {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}