CSS
【CSS】CSSで実装されたハンバーガーCSS Hamburgers
December 24, 2016

CSS HamburgersはバーガーとCSS愛好家のためのCSSハンバーガー。
<link rel="stylesheet" href="/dist/css-hamburgers.min.css">
<!-- 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>
// 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