ハンバーガーボタンに困ったら


blog20170214

ハンバーガーボタンを簡単に設置でき、アニメーションのバリエーションも豊富に備えた「Tasty CSS-animated hamburgers」の紹介。

ダウンロード

→こちらのサイトからダウンロード

使い方

<head>内にhamburgers.cssを読み込む

[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]

HTML内のボタンを配置したい個所に

[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]

→デモはこちら

他にもバリエーションがありますので幅広く使えると思います。


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。