こんにちは。
今回はハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」！です。
CSSのファイルを読み込んで、クラスを追加するだけで、ハンバーガーメニューにアニメーションを追加できるライブラリを紹介します。
ハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」！
Hamburgers
「Hamburgers」をダウンロードしてみよう！
https://github.com/jonsuh/hamburgersにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「Hamburgers」を設置してみよう！
hamburgers.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="css/hamburgers.css"> |
html部分を記述します。
1 2 3 4 5 | <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> |
divだとこんな感じです。
1 2 3 4 5 | <div class="hamburger"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> |
追加したいアニメーションのクラスを付けます。
1 2 3 4 5 | <button class="hamburger hamburger--collapse" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> |
用意されているアニメーションのクラスは全18種類です。
hamburger–3dx
hamburger–3dx-r
hamburger–3dy
hamburger–3dy-r
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–spring
hamburger–spring-r
hamburger–stand
hamburger–stand-r
hamburger–squeeze
hamburger–vortex
hamburger–vortex-r
これはいいですね。是非、どこかで使いたいですね。
以上でハンバーガーアイコンに様々なアニメーションを実装できるスタイルシート「Hamburgers」！でした。
