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

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。

 
amburgers

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

  • LATEST
  • RELATED
  • POPULAR