Burger menu

Piotr Elmanowski | Published: 16 Nov, 2015

This component is usually used as a trigger for navigation menu, mainly on mobile versions of websites. Burger menu can be made without image, however it requires jQuery library to run.

DOWNLOAD COMPONENT

or: watch live demo | see on GitHub.

Example

To use this component on your website, you should define:

additional CSS properties for “.burger-menu” to set sizes, colors and position of the component to fit it to your project,
JS actions to open and close your menu, basing on your html markup.

HTML

<a href="#" class="burger-menu" title="menu-mobile">
	<div class="lines">
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="crossed">
		<span></span>
		<span></span>
	</div>
</a>

</div>

</div>

</a>

CSS:

.burger-menu {
    display: inline-block;
    width: 50px;
    height: 50px;
	position: relative;
}
.burger-menu span {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	margin-top: 8px;
	background: #000;
}
.burger-menu span:first-child {
	margin-top: 0;
}
.burger-menu .lines,
.burger-menu .crossed {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.burger-menu .crossed {
	display: none;
}
.burger-menu .lines {
	display: block;
}
.burger-menu.active .crossed {
	display: block;
}
.burger-menu.active .lines {
	display: none;
}
.burger-menu.active .crossed span {
	position:absolute;
	margin: 0;
	width: 100%;
}
.burger-menu.active .crossed span:first-child {
	-moz-transform: rotateZ(45deg);
	-webkit-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}
.burger-menu.active .crossed span:last-child {
	-moz-transform: rotateZ(-45deg);
	-ms-transform: rotateZ(-45deg);
	-webkit-transform: rotateZ(-45deg);
	transform: rotateZ(-45deg);
}

.burger-menu {

display: inline-block;

width: 50px;

height: 50px;

position: relative;

}

.burger-menu span {

display: block;

width: 100%;

height: 3px;

border-radius: 2px;

margin-top: 8px;

background: #000;

}

.burger-menu span:first-child {

margin-top: 0;

}

.burger-menu .lines,

.burger-menu .crossed {

width: 100%;

position: absolute;

top: 50%;

left: 50%;

-moz-transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-ms-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

.burger-menu .crossed {

display: none;

}

.burger-menu .lines {

display: block;

}

.burger-menu.active .crossed {

display: block;

}

.burger-menu.active .lines {

display: none;

}

.burger-menu.active .crossed span {

position:absolute;

margin: 0;

width: 100%;

}

.burger-menu.active .crossed span:first-child {

-moz-transform: rotateZ(45deg);

-webkit-transform: rotateZ(45deg);

-ms-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.burger-menu.active .crossed span:last-child {

-moz-transform: rotateZ(-45deg);

-ms-transform: rotateZ(-45deg);

-webkit-transform: rotateZ(-45deg);

transform: rotateZ(-45deg);

}

Effect:

JavaScript:

$(function() {
	$(".burger-menu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active");
		/* Here you can toggle your menu basing on your html markkup */
	});
});

$(function() {

$(".burger-menu").click(function(e) {

e.preventDefault();

$(this).toggleClass("active");

/* Here you can toggle your menu basing on your html markkup */

});

Tags: burger menu, css, html, JavaScript, menu