CSS

【CSS】CSSアニメーションハンバーガーのアイコンコレクション。Hamburgers

March 8, 2016

HamburgersはCSSアニメーションを使ったハンバーガーのアイコンコレクションです。

CSS

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

マークアップ

<button class="hamburger" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button> 

DIVで使用

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

使用するハンバーガーの種類のクラス名を追加

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

ハンバーガー型クラスのリスト

hamburger–arrow
hamburger–arrow-r
hamburger–arrowalt
hamburger–arrowalt-r
hamburger–boring
hamburger–collapse
hamburger–collapse-r
hamburger–elastic
hamburger–elastic-r
hamburger–emphatic
hamburger–emphatic-r
hamburger–slider
hamburger–slider-r
hamburger–spin
hamburger–spin-r
hamburger–squeeze
hamburger–vortex
hamburger–vortex-r

-rは反時計周りに回転する

トリガー

is-activeクラス名を付加する

<button class="hamburger hamburger--collapse is-active" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

ライセンスはMIT。