by Daniel, on 12th Aug, 2013

Recreating the Facebook Mobile Menu effect

Hello all,

Been busy here @weareforrk HQ with lots of new client work (& our summer holidays) which explains the slight delay in our latest blog post. 

Today we are going to create a mobile menu in HTML/CSS and a tiny bit of JQuery. The mobile menu will function in the same way the Facebook mobile-app menu expands from the left hand side and pushes the main content out of the viewport. You can view it in action on Facebook by visiting http://m.facebook.com & you can check out our example here.

 

Lets begin with our HTML. (Start with a blank HTML template - I personally prefer http://html5reset.org/)

Below are the elements we will use to build our basic mobile menu:

 

    

Mobile Menu Example

  • Home
  • About
  • Contact

Now lets move onto the styling of the elements. I will start with the content container, for this element the styling is mostly dependant upon your needs. I have gone with a fluid width and a set height of 100% (height should be removed for non-demo purposes). The container is centered and has padding although this is calculated within the width by using box-sizing:border-box. The important CSS here is that the .content class has a position of relative.

 

    .content
    {
        width:75%;
        margin:0px auto;
        background:white;
        -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);
        box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.05);
        height:100%;
        text-align:center;
        box-sizing:border-box;
        position:relative;
    }

Next up we will style the actual mobile menu. Once again exact styles can be changed dependant on your needs, the only important styles that must be applied are those which position the element and ensure display is set to none by default. We will also create a class of active which will display the element when appropriate.

 

   #mobile-menu
    {
        position:absolute;
        left:0;
        top:0;
        width:70%;
        height:100%;
        z-index:100;
        -webkit-box-shadow: inset -25px 0px 15px -25px rgba(0,0,0,0.2);
        box-shadow: inset -25px 0px 15px -25px rgba(0,0,0,0.2);
        display:none;
    }
    #mobile-menu.active
    {
        display:block;
    }

Now we have built our basic page we need to style the element which will trigger the mobile menu when clicked. This is contained in the .top-bar element. This element is once again hidden and only becomes visible using media queries when our screen is less than a certain width. I have this set to

   .top-bar
 {
 display:none;
 width:100%;
 background:#2f2f2f;
 color:white;
 padding:10px 0 10px;
 z-index:100;
 text-align:left;
 }

So to recap we have a standard container for our content. A top bar which becomes visible when the site is viewed in a device with a low enough screen resolution and a mobile menu which is placed absolutely to the left of the page and hidden with display:none

Now we have to use some JQuery to make the mobile menu visible when the user clicks our 'open menu' link. The JQuery is below and is very simple. All we do is listen for a click event on the relevant DOM element and check if the mobile menu has a class of active. If it does not then show the menu and force the main container out of view, if it does then rehide the menu and move the container back.

   
 $('.mobile-interact').click(function()
 {

    if($('#mobile-menu').hasClass('active'))
    {
        $('#mobile-menu').removeClass('active');
        $('.content').css('left', '0%');
    }
    else
    {
        $('#mobile-menu').addClass('active');
        $('.content').css('left', '70%');
    }

 });

And that's about it. You can style this however you want. Don't forget if you have any questions about this tutorial you can always tweet us @weareforrk. The demo can be found here. (Remember you will need to resize your browser window (or view on mobile) if you wish to actually see the effects, this is after all a mobile tutorial)

request a callback

Why not check us out on some of our social networking accounts. Alternatively, if you would prefer to contact us directly, you can always drop us a line below or on hello@forrk.co.uk or tell us about your project and get a quote.

GET A QUOTE Back to top