martin-post-facebook-menu

How to create a simple Facebook style sidebar menu using only CSS and minimal JavaScript

No need for jQuery Mobile, twitter bootstrap, or anything like that.

Let’s be honest here, mobile is a pretty big part of everyday life nowadays and with smart phones and other mobile devices becoming cheaper and more readily available as time goes on, having a mobile web design friendly website is a must.

Like everyone with a mobile device, I’ve experienced my fair share of good and bad mobile sites. I’ve also experienced my fair share of mobile navigation, some easy to use, some broken and buggy. I’ve come across a few different mobile navigation methods, the plain old select dropdown, the more advanced yet, in my option, kinda worse jquery dropdowns, and the pretty cool Facebook style slide menus.

I’ve been working with mobile web design for a while now and I have only recently started using the side navigation. It all came about while making a responsive Opencart 1.5 template for work. I had seen the facebook menu and did everything I can to replicate it and implement it into the template.

Shut up and skip to the code!

Hell bent on a mission I scoured the web for a little while trying to find out just how to create such a menu and was then pretty disappointed to find that a lot of the methods out there either needed a framework such a jQuery Mobile implemented or the menus just slid in from the side over the content. Now I’m a pretty stubborn person when it comes to getting someone working the way I want it to work and I sometimes spend a little too long on things just to get things looking or working the way I want them to.

Hell bent on a new mission and with the help of Bjorn (our Senior Technical Lead) here in the office, I decided to begin creating it myself from scratch. During the course of development we ran into a log to issues trying to get the content to shift with and in line with the side menu. We never had the time, with our busy schedules and all, to just sit down for a few hours and nut this out and we were only working on this sporadically in amongst other work and by the end of it all we almost gave up and conceded to just having the menu slide from the side over the content. But then Bjorn had an idea that I’m going to take credit for now I’ve decided. Anyway, moving on, have a look at the code below and see the final product.

The HTML

CSS and Javascript Calls

<!-- START Javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/slide-menu.js"></script>
<!-- START CSS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300' rel='stylesheet' type='text/css'>
<link href='css/style.css' rel='stylesheet' type='text/css'>

The Mobile Menu

<!-- Mobile Header START -->
<div class="mobile-header">
    <ul class="clearfloat">
		<li class="m-menu">
			<a><span class="menu-open">Menu</span><span class="menu-close">Close</span></a>
		</li>
		<li>
			<a href="http://www.mywork.com.au/blog/how-to-create-a-simple-bacebook-style-sidebar-menu-using-only-css-and-minimal-javascript-no-need-for-jquery-mobile-or-twitter-bootstrap/">Back To Blog Post</a>
		</li>
		<li>
			<a href="http://www.mywork.com.au/blog/author/martin/">More Posts By Martin</a>
		</li>
		<li>
			<a href="http://www.mywork.com.au">MyWork.com.au</a>
		</li>
	</ul>
</div>
<!-- Mobile Header END -->

The Content

<div id="container-outer">

    <!-- Mobile Menu START -->
	<div class="mobile-menu">
		Menu content to go here
	</div>
	<!-- Mobile Menu END -->
	
	<div id="container">
		<div id="container-inner">
		Your Content Here
		</div>
	</div>

	<div class="mobile-menu-bg"></div>
</div><!-- Full Site Container Outer End -->

The Javascript

$(document).ready(function() {
    $(".m-menu").click(function(){
	
		$("#container").toggleClass("active");
		$(".m-menu").toggleClass("active");
		$(".mobile-menu").toggleClass("active");
		$(".mobile-menu-bg").addClass("active");
	});
	
	$(".mobile-menu").css('left','-200px');
	$(".mobile-menu-bg").css('left','-200px');
	$(".m-menu").toggle(function() {
		$('.mobile-menu').animate({ left: '0' }, { duration: 500, queue: false });
		$('.mobile-menu-bg').animate({ left: '0' }, { duration: 500, queue: false });
		$('#container').animate({ 'margin-left': '200px' }, { duration: 500, queue: false });
		$('#container').animate({ 'margin-right': '-200px' }, { duration: 500, queue: false });
	}, function() {       
		$('.mobile-menu-bg').animate({ left: '-200' }, { duration: 500, queue: false });
		$('.mobile-menu').animate({ left: '-200' }, { duration: 500, queue: false });
		$('#container').animate({ 'margin-left': '0' }, { duration: 500, queue: false });
		$('#container').animate({ 'margin-right': '0' }, { duration: 500, queue: false });
	}
	);
})

The CSS

/* Layout */
#container-outer,
#container {
    width: 100%;
	overflow: hidden;
	display: block;
}
#container-inner {
	max-width: 880px;
	overflow: hidden;
	display: block;
	padding: 50px;
	margin: 50px auto;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
	background: #ffffff;
}
/* Mobile Menu */
.mobile-header {
	line-height: 100%;
	width: 100%;
	display: block;
	position: relative;
	z-index: 30;
	background: #ffffff;
	z-index: 9999;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.mobile-header ul {
	margin: 0px;
	padding: 0px;
	z-index: 30;
	list-style: none;
}
.mobile-header ul li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	position: relative;
	z-index: 30;
	width: 25%;
}
.mobile-header ul li a {
	margin: 0px;
	padding: 20px 0px;
	width: auto;
	display: block;
	background: none;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	color: #888888;
	cursor: pointer;
	border-right: 1px solid #eeeeee;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}
.mobile-header ul li.m-menu a {
	font-weight: 700;
}
.mobile-header ul li a:hover,
.mobile-header ul li.active,
.mobile-header ul li.active a {
	color: #ffffff;
	background: #77c043;
}
.mobile-header ul li a:hover,
.mobile-header ul li.active a {
	border-right: 1px solid #63A832;
}
.mobile-header ul li a span.menu-open,
.mobile-header ul li.active a span.menu-close {
	display: inline;
}
.mobile-header ul li.active a span.menu-open,
.mobile-header ul li a span.menu-close {
	display: none;
}
/* Mobile Menu */
.mobile-menu {
	/* background: #222222; */
	margin: 0px;
	padding: 30px;
	width: 140px;
	text-transform: none;
	font-size: 12px;
	position: absolute;
	top: 72px;
	bottom: 0px;
	left: -200px; /* Hides Brief Menu Popup As JavaScript Loads */
	z-index: 9998;
	display: block;
	height: 100%;
	overflow: hidden;
	color: #ffffff;
}
.mobile-menu.active {
	height: auto;
	overflow: visible;
}
.mobile-menu-bg {
	background: #222222;
	margin: 0px;
	position: fixed;
	width: 200px;
	top: 0px;
	bottom: 0px;
	left: -200px; /* Hides Brief Menu Popup As JavaScript Loads */
	z-index: 9997;
	display: block;
	height: 100%;
	-webkit-box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 1);
	box-shadow: inset 0px 0px 100px 0px rgba(0, 0, 0, 1);
}
.mobile-menu.active,
.mobile-menu-bg.active {
	display: block;
}
/* Floats */
.clearfloat:after {
	content: ""; 
	display: table;
	clear: both;
}

View DemoDownload Source

View on GitHub

There you have it, a super quick, super simple and super easy way to create a sidebar menu similar to Facebook.

  • Pedro Guilherme da Rosa

    Very good! Thanks!

  • Nkansah Rexford

    Hi. thanks for your nice piece of design. However, the menu wouldn’t show up when I downloaded your source.

    To work, I saved the demo page. Something not going right in the source file? :)

    • http://www.mywork.com.au/ Martin

      Thanks for letting me know. I have fixed the source download file, the jQuery 1.7 wasn’t being called.

      • Nkansah Rexford

        Great! :) Thanks

  • jnajerat

    This looks great! but could you please fixed for jQuery >= 1.9.0, because the toggle function is not working! Regards.

    • http://www.mywork.com.au/ Martin

      Hey there,

      I’ve just updated the code on my Git page to make it compatible with jQuery 1.90+, you can find it here: https://github.com/MartinKrestan

      let me know if it doesn’t work.

      • jnajerat

        Thanks! It looks awesome and works like a charm.

  • http://www.mywork.com.au/ Martin

    Hey there, thanks for the comment.

    It’s more the fact that I wanted the menu to act in a specific way and in addition to this, I did not want to have to use a framework either. I mentioned that the examples I had come across either required a framework or didn’t function the way I was hoping it to.

    Don’t get me wrong, I’m no expert coder by any stretch of the imagination, I pretty much started building the foundations in jQuery before I wanted it to work in a specific way. Once I decided I wanted it to function the way it functions now, we just stuck with jQuery.

  • Cody Thompson

    Hey, i have a little problem that i can’t quite get figured out and i’m unsure if its with the css of the js. I switched it so that the menu comes out from the right as opposed to the left. When i did this it works fine, except i can now scroll over to the right and see the mobile menu div. Any ideas what would cause this?

    • http://www.mywork.com.au/ Martin

      Hey,

      All you need to do to fix this is to add a position: relative to the container div from memory. If you check out the GIT page for it, you’ll be able to grab the latest version of it.