A port of Sass Burger by Joren Van Hee to Less.
Check here for a demo.
bower install less-burger --save
npm install less-burger --save
Clone repo, or download zip, and copy the files from dist/css and dist/js to your project's assets folder.
You can either copy dist/css/less-burger-menu.min.css to your projects assets. Or, you can import src/less/less-burger.less into your Less project for use as a mixin.
...
<head>
...
<link rel="stylesheet" href="path/to/css/less-burger-menu.min.css">
</head>
<body>
<a id="menuButton" href="#" class="menu-button">
<span class="burger-icon"></span>
</a>
...
<script>
var menuButton = document.getElementById('menuButton');
menuButton.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
e.preventDefault();
});
</script>
</body>@import "less-burger.less";
.menu-button {
display: inline-block;
padding: .5em;
background-color: #fafafa;
border: 1px solid #ccc;
}
.burger-icon {
.burger(25px, 3px, 5px, #444);
}
.menu-button.is-active .burger-icon {
.burger-to-cross(3px, 5px);
}Feel free to do what you'd like with this. Clone or fork the repo, type npm install and have your way with it. Please keep reference to both myself (Mark Rabey) and Joren Van Hee.
Less Burger © 2015, Mark Rabey. Released under the MIT License.
Authored and maintained by Mark Rabey
http://markrabey.com · GitHub @MarkRabey · Twitter @MarkRabey