Home » Tutorials » HTML & CSS » Create Facebook App Style Slide-Out Navigation

Create Facebook App Style Slide-Out Navigation

Create Facebook App Style Slide-Out Navigation

  • Stumble it!
  • Share

Introduction to Slide-Out Navigation (a.k.a left-hand navigation)

Back to October 2011, Facebook introduced its new navigation pattern – “slide-out” navigation” which available on Facebook for iPad & iPhone application. The slide-out navigation consists of a panel that slide out from left of the main content area, revealing a list of clickable items that serves as a primary navigation for the application. This navigation pattern lets developers to add permanent navigation to their application without taking up valuable screen real estate. Users can choose to reveal the navigation anytime when they need it.

Facebook App Style Slide-Out Navigation
Facebook navigation pattern – Slide-Out Navigation

This tutorial will show you how to build a Facebook app-like slide-out navigation for your web app using CSS & JQuery.

View Demo

HTML Markup

Here is the basic HTML structure of the slide-out navigation.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body class="pushmenu-push">
<nav class="pushmenu pushmenu-left">
	<h3>Welcome Peter Yee</h3>
    <a href="#">Home</a>
    <a href="#">Profile</a>
    <a href="#">Games</a>
    <a href="#">Message</a>
    <a href="#">Settings</a>
    <a href="#">Logout</a>
</nav>

<div class="container">
	<div class="main">
    	<section class="buttonset">
            <div id="nav_list">Show/Hide Left Push Menu</div>
        </section>
        
        <section class="content">
        <h1>Introducing Facebook Home</h1>
        <p>Facebook Home is software for your phone designed to put your friends above everything else. You can download Facebook Home for free or purchase it pre-installed on a phone. Facebook Home works together with the Facebook for Android and Facebook Messenger apps to enable its main features:</p>
        <ul>
        	<li><strong>Cover feed:</strong> Glance at your phone for photos and posts from your Facebook News Feed.</li>
            <li><strong>Chat heads:</strong> Send and receive texts and Facebook messages in one place. Open, close and drag chat heads around your screen to keep chatting while you’re using other apps.</li>
            <li><strong>Notifications:</strong> See news as it happens with bigger, bolder notifications on your home screen.</li>
            <li><strong>App launcher:</strong> Get right to your favorite apps and post to Facebook from the same place.</li>
        </ul>
        </section><!-- END END content -->
    </div><!-- END main -->
</div><!-- END container -->
</body>
</html>

The body of HTML document contains a class for us to animate it. We’ve divide the document into 2 main regionsnavigation panel & info container.

The CSS

<style>
body {
	margin: 0;
}

.pushmenu {
	background: #3c3933;
	font-family: Arial, Helvetica, sans-serif;
	position: fixed;
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
}

.pushmenu h3 {
	color: #cbbfad;
	font-size: 14px;
	font-weight: bold;
	padding: 15px 20px;
	margin: 0;
	background: #282522;	
	height: 16px;
}

.pushmenu a {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	border-top: 1px solid #57544e;
	border-bottom: 1px solid #312e2a;
	padding: 14px;
}

.pushmenu a:hover {
	background:258ecd;	
}

.pushmenu a:active {
	background: #454f5c;
	color: #fff;	
}

.pushmenu-left {
	left: -240px;	
}

.pushmenu-left.pushmenu-open {
	left: 0px;	
}

.pushmenu-push {
	overflow-x: hidden;
	position: relative;
	left: 0;	
}

.pushmenu-push-toright {
	left: 240px;	
}

/*Transition*/
.pushmenu, .pushmenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}

#nav_list {
	background: url(icon_nav.png) no-repeat left top;
	cursor: pointer;
	height: 27px;
	width: 33px;
	text-indent: -99999em;	
}

#nav_list.active {
	background-position: -33px top;	
}

.buttonset {
	background: linear-gradient(center top , #6b85b3, #334d86);
	background:-moz-linear-gradient(center top , #6b85b3, #334d86);
    background: -webkit-gradient(linear, center top, center bottom, from(#6b85b3), to(#334d86));
	height: 16px;
	padding: 10px 20px 20px;
}

section.content {
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 20px;	
}
</style>

The CSS styles that we implemented is quite simple and straightforward. Basically, we just need to concentrate on these 6 styles.pushmenu, .pushmenu-left, .pushmenu-left.pushmenu-open, .pushmenu-push, #nav_list & #nav_list.active.

.pushmenu & .pushmenu-left

The navigation panel should always be accessible for the users, even if they scroll down the page. So the position of navigation panel should be fixed. That’s y we set the “position:fixed”. The “left:-240px” is set to hide the navigation panel from screen.

.pushmenu-left.pushmenu-open

Here we change the value of “left” property to 0, to reveal the navigation panel.

.pushmenu-push

We want the entire page included info container move to right when revealing the navigation panel. Here is how we apply the CSS transition property – “transition: all 0.3s ease”.

#nav_list & #nav_list.active

This is the style for the button (3 lines button on top left). The 3 lines button icon will be changed to back arrow icon when the navigation panel revealed.

JavaScript

Using JavaScript to toggle class of the navigation panel, document body & the 3 lines button (top left).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		$menuLeft = $('.pushmenu-left');
		$nav_list = $('#nav_list');
		
		$nav_list.click(function() {
			$(this).toggleClass('active');
			$('.pushmenu-push').toggleClass('pushmenu-push-toright');
			$menuLeft.toggleClass('pushmenu-open');
		});
	});
</script>

Save your document and preview on your browse. You will a list of clickable items when press on top left 3 lines button and hide it when press on the back arrow button.

View Demo


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Build Intelligent Layout Using CSS Calc() Property
  • Design Your Own Responsive Web Template

  • http://twitter.com/KirkBater Kirk Bater

    The only problem I have with this is that you’re using a simple transition, which won’t do too well on webkit mobile browsers. You want to use 3D Transforms which force the browser to use the GPU, thus creating a smooth transition.

    Also, worth noting: Div a which contains div b, c, and d. Div C is position:fixed to the top of the browser window, while div b, and d are normally positioned. If you 3D transform div A, all fixed elements within div a become fixed relative to div a, so they won’t be fixed to the browser window anymore. You’ll have to write div c outside of div a and then fix it to the browser to 3d transform div a.

    I’m not always the best at explaining these kinds of things, so if you have any questions feel free to shoot me a tweet at @kirkbater

    • Muhammad Akhtar

      the problem i am facing is that there is no scroll bar as my menu items are more than 15 and it just wont scroll down :(

      • http://www.onlywebpro.com onlyWebPro

        Hi Muhammad Akhtar,
        You can try to apply a CSS property – “overflow:scroll” for the .pushmenu, .pushmenu-push

  • Andrew Murphy

    Thanks for this! I’m having one problem though…

    I have a lot of content in my container so I need to be able to scroll. If I do scroll, then the .buttonset disappears up the page with the scroll.

    So, if I then set the position of the section.buttonset to fixed, I can nicely scroll the content without losing the button. BUT when I press the button to reveal the navigation, I lose the image to click back, to close the navigation again, because it’s covered up by the popping out navigation.

    Am I making sense?

    • Andrew Murphy

      anyone?

      • http://www.onlywebpro.com onlyWebPro

        Hi Andrew,

        You can try to reduce the width of your nav element.

  • Anyo

    FYI for those who cannot get this work work in their current config, please try :

    $(document).on(‘click’, “#nav_list”, function() {
    $(this).toggleClass(‘active’);
    $(‘.pushmenu-push’).toggleClass(‘pushmenu-push-toright’);
    $(‘.pushmenu-left’).toggleClass(‘pushmenu-open’);
    console.log(“fuck yeah”);
    });

    The problem is that since the class is added dynamically, you need to use event delegation to register the event handler.

    I ran into this problem, and hope it helps you! :D

  • Anyo

    Lol, whoops ignore the last console.log part. that was for my debugging

    • http://www.onlywebpro.com onlyWebPro

      Thank you so much for contributing your knowledge to other web developers!!! Thank you so much!

  • Johann Klein Quimada

    its so easy :)

  • vannaibell

    I love it . thanks you!

  • sahil_magentobuzz

    This is working absolutely fine.. but i need that nav menu will go to left when press anywhere on screen like in facebook or youtube. Not only from the arrow part. How can we achieve that..Any solution?

Android, iOS Development Tutorials