You probably see one every time you browse the web on your mobile, they are pretty much standard these days: the hamburger menu. The little three bars stacked on top of each other at the top left or right side of a web page. Usually seen on mobile websites, but the hamburger menu is now making its way onto many desktop websites too.

In this guide, we will take you through a few easy steps to create a neat looking hamburger menu for your website using HTML, CSS and a little bit of jQuery.

See The Demo

The HTML

The code for the actual hamburger menu icon is simple, just a span within a link element:

<a class="hamburger menu-btn" href="javascript:void(0)"><span></span></a>

For the sake of this tutorial, we will also include the HTML for a basic mobile menu:

<div class="main-menu-wrap">
	<div class="main-menu">
		<a href="#">Home</a>
		<a href="#">About Us</a>
		<a href="#">Services</a>
		<a href="#">Blog</a>
		<a href="#">Get in Touch</a>
	</div>
</div>

The jQuery

Here we are toggling the classes for the body and the hamburger menu icon. But we are also setting a height for our basic mobile menu on first click, then removing the style attribute when the menu button is clicked again.

$(function(){
			
	var clicked = 0;
	$('.menu-btn').click(function(e){
	
		var screen_height = $(window).height() - $('.mob-header').height();
		
		$(this).toggleClass('active');
		$('body').toggleClass('menu-active');
		
		if (clicked == 0) {
			$('.main-menu-wrap').height(screen_height);
			clicked = 1;
			return;
		}
		
		if (clicked == 1) {
			$('.main-menu-wrap').removeAttr('style');
			clicked = 0;
			return;
		}
		
	});
	
});

The CSS

.hamburger {
	display: block;
	float: right;
	width: 28px;
	height: 27px;
	margin: 12px 0 0;
	position: relative;
	z-index: 999999;
}

.hamburger span {
	margin: -2px 0 0;
	position: absolute;
	top: 50%;
	width: 28px;
	height: 3px;
	background-color: #09c;
	display: none;
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	transition-duration: 0s;
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s
}

.hamburger span {
	display: block
}

.hamburger span:before, .hamburger span:after {
	position: absolute;
	content: ''
}

.hamburger span:before, .hamburger span:after {
	width: 28px;
	height: 3px;
	background-color: #09c;
	display: block
}

.hamburger span:before {
	margin-top: -10px
}

.hamburger span:after {
	margin-top: 10px
}

.hamburger span:before {
	-webkit-transition-property: margin, -webkit-transform;
	-webkit-transition-duration: .2s;
	-webkit-transition-delay: .2s, 0s;
	-moz-transition-property: margin, -moz-transform;
	-moz-transition-duration: .2s;
	-moz-transition-delay: .2s, 0s;
	transition-property: margin, transform;
	transition-duration: .2s;
	transition-delay: .2s, 0s
}

.hamburger span:after {
	-webkit-transition-property: margin, -webkit-transform;
	-webkit-transition-duration: .2s;
	-webkit-transition-delay: .2s, 0s;
	-moz-transition-property: margin, -moz-transform;
	-moz-transition-duration: .2s;
	-moz-transition-delay: .2s, 0s;
	transition-property: margin, transform;
	transition-duration: .2s;
	transition-delay: .2s, 0s
}

.hamburger: hover {
	border: none
}

.hamburger.active span {
	background-color: rgba(0,0,0,0);
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s
}

.hamburger.active span:before {
	margin-top: 0;
	-webkit-transform: rotate(45deg);
	-webkit-transition-delay: 0s, .2s;
	-moz-transform: rotate(45deg);
	-moz-transition-delay: 0s, .2s;
	transform: rotate(45deg);
	transition-delay: 0s, .2s
}

.hamburger.active span:after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transition-delay: 0s, .2s;
	-moz-transform: rotate(-45deg);
	-moz-transition-delay: 0s, .2s;
	transform: rotate(-45deg);
	transition-delay: 0s, .2s
}

.main-menu-wrap {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	top: 70px;
	background: #09c;
	height: 0;
	overflow: auto;
	text-align: center;
	transition: height 0.6s cubic-bezier(0.5, 1, 0.22, 1);
	-webkit-transition: height 0.6s cubic-bezier(0.5, 1, 0.22, 1);
}

.main-menu {
	opacity: 0;
	padding-top: 50px;
	transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
}

.menu-active .main-menu {
	opacity: 1;
	transition: opacity 0.2s 0.2s ease-in-out;
	-webkit-transition: opacity 0.2s 0.2s ease-in-out;
}

.main-menu a {
	color: #fff;
	display: block;
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: 10px;
	padding: 10px;
	text-decoration: none;
}

.main-menu a:hover, .main-menu a:active {
	color: #004d67;
}

See The Demo

Free Graphics, Icons, Tutorials
Free Graphics Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector GraphicsFree Music Controls Vector Icon Pack
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358