CSS

【CSS】CSSで実装されたハンバーガーCSS Hamburgers

December 24, 2016

CSS HamburgersはバーガーとCSS愛好家のためのCSSハンバーガー。

Download

<link rel="stylesheet" href="/dist/css-hamburgers.min.css">

Add Markup

<!-- CSS Hamburger Markup -->
<button class="m-hamburger mm-hamburger--l-rotating-arrow"
    aria-label="Menu" aria-controls="navigation">
    <span>Menu</span>
</button> 
<!-- / Hamburger -->

<!-- Your Navigation -->
<nav id="navigation">
    ....
</nav>

Javascript

// jQuery

    $('.m-hamburger').toggleClass('is-active');

// or just plain javascript
      (function() {
          'use strict';

          var toggles = document.querySelectorAll('.m-hamburger');

          for (var i = toggles.length - 1; i >= 0; i--) {

              var toggle = toggles[i];
              toggleHandler(toggle);
          };

          function toggleHandler(toggle) {

              toggle.addEventListener( 'click', function(e) {
                  e.preventDefault();
                  this.classList.toggle('is-active');
              });
          }
      })();

MIT

Demo/Download