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


blog20170214

ハンバーガーボタンを簡単に設置でき、アニメーションのバリエーションも豊富に備えた「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>

→デモはこちら

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


PAGE TOP

CONTACT

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