ハンバーガーボタンに困ったら
ハンバーガーボタンを簡単に設置でき、アニメーションのバリエーションも豊富に備えた「Tasty CSS-animated hamburgers」の紹介。
ダウンロード
使い方
<head>内にhamburgers.cssを読み込む
<link href="css/hamburgers.css" rel="stylesheet">
<body>タグ直前に以下のJavascriptを読み込ませる
<script>
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
</script>
HTML内のボタンを配置したい個所に
<div class="hamburger">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
アニメーションはクラスhamburgerにアニメーションのクラスを付与することで変更できます。
アニメーションの種類はダウンロードしたファイル内のdist > example.htmlを参照
例…hamburger–collapseを追加
<div class="wrap"> <div class="hamburger hamburger--collapse"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </div> </div>
他にもバリエーションがありますので幅広く使えると思います。
