CSS Hamburger Menu

I like the hamburger menu. It makes sense. So this is the one that I use when building a menu for mobile devices.

Here’s the HTML:

<nav id="mobile-navigation" class="site-navigation mobile-navigation" role="navigation">
    <a href="#" class="mobile-menu-link">MENU<span></span></a>
</nav>

And the SCSS:

.mobile-navigation {
	display: none;

	.mobile-menu-link {
		display: block;
		position: relative;
		width: 90px;
		height: 30px;
		left: 0;
		color: #2f6b68;
		font-size: 20px;
		text-align: right;
		margin: 10px;
		@include transition(all, 200ms, ease);
		
		span {
			content: " ";
			display: block;
			position: absolute;
			width: 24px;
			height: 4px;
			left: 50%;
			top: 44%;
			margin-left: -43px;
			background: transparent;
			@include transition(all, 200ms, ease);
			&:before {
				content: " ";
				display: block;
				position: absolute;
				width: 24px;
				height: 4px;
				background: #2f6b68;
				left: 50%;
				margin-left: -12px;
				transform: rotate(45deg);
				top: 0;
				@include transition(all, 200ms, ease);
			}
			&:after {
				content: " ";
				display: block;
				position: absolute;
				width: 24px;
				height: 4px;
				background: #2f6b68;
				left: 50%;
				margin-left: -12px;
				transform: rotate(-45deg);
				top: 0;
				@include transition(all, 200ms, ease);
			}
		}
	}
	.menu-mobile-container {
		height: auto;
		background-color: #ffffff;
		.nav-menu {
			position: relative;
			z-index: 50;
			width: 100%;
			.menu-item {
				display: block;
				margin: 0;
				a {
					display: block;
					border-radius: 0;
				}
			}
		}
	}
}
.mobile-navigation.closed {
	.mobile-menu-link {
		span {
			background: #2f6b68;
			&:before {
				top: -7px;
				transform: rotate(0);
			}
			&:after {
				top: 7px;
				transform: rotate(0);
			}
		}
	}
	.menu-mobile-container {
		height: 0;
		overflow: hidden;
		position: relative;
	}
}

Here’s my transition mixin:

@mixin transition($property, $time, $type: ease) {
	-webkit-transition: $property $time $type;
	-moz-transition:$property $time $type;
	-ms-transition:$property $time $type;
	-o-transition:$property $time $type;
	transition:$property $time $type;
}

And here’s some of the jQuery:

$(document).ready( function() {
	$('.mobile-menu-link').on('click', function(event) {
		event.preventDefault();
		$(this).parent('.mobile-navigation').toggleClass('closed', 200);
	});
});

Now, this toggleClass function is giving a little bit of a delay, so if you can figure out a way of doing all of this without it, I’d be interested in knowing a fix.

I like the animation of the ‘X’ that is provided with this hamburger menu. It’s intuitive and self-explaining.