Awesome

Less Burger

A port of Sass Burger by Joren Van Hee to Less.

Check here for a demo.

Installation

Bower

bower install less-burger --save

NPM

npm install less-burger --save

Without a Package Manager

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.

Usage of Compiled CSS

Sample HTML structure:

...
<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>

Sample using Less mixin

@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);
}

Development

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.

http://markrabey.com · GitHub @MarkRabey · Twitter @MarkRabey