ハンバーガーボタンに困ったら
ハンバーガーボタンを簡単に設置でき、アニメーションのバリエーションも豊富に備えた「Tasty CSS-animated hamburgers」の紹介。
ダウンロード
使い方
<head>内にhamburgers.cssを読み込む
[html]
<link href="css/hamburgers.css" rel="stylesheet">
[/html]
<link href="css/hamburgers.css" rel="stylesheet">
[/html]
<body>タグ直前に以下のJavascriptを読み込ませる
[js]
<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>
[/js]
<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>
[/js]
HTML内のボタンを配置したい個所に
[html]
<div class="hamburger">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
[/html]
<div class="hamburger">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
[/html]
アニメーションはクラスhamburgerにアニメーションのクラスを付与することで変更できます。
アニメーションの種類はダウンロードしたファイル内のdist > example.htmlを参照
例…hamburger–collapseを追加
[html]
<div class="wrap">
<div class="hamburger hamburger–collapse">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
[/html]
<div class="wrap">
<div class="hamburger hamburger–collapse">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
</div>
[/html]
他にもバリエーションがありますので幅広く使えると思います。
