How to create a sliding mobile menu with jQuery

With responsive design being so prevalent nowadays, there are a lot of ways that you can handle the navigation when the browser gets down to a tablet/smartphone size. One of the ways you can handle the navigation is to have it slide out from the right or left of the screen upon button click, like the Facebook app does. In this tutorial- we are going to learn how to do exactly that.

The Markup

There isn’t much markup involved here, just a simple menu div list to hold our navigation, and a link for us to use to trigger the menu animation.

<div class="menu">
    <a class="menu-item" href="#">Link</a>
    <a class="menu-item" href="#">Link</a>
    <a class="menu-item" href="#">Link</a>
    <a class="menu-item" href="#">Link</a>
</div>
<div class="page-wrap"> 
    <div class="content">
        <div class="button"><a href="#"></a></div>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        
    </div>
</div>

The jQuery

The only thing we need jQuery for is to apply and remove the correct class names.

$(".button").toggle(function () {
    $(".menu").addClass("menu-open");
    $(".page-wrap").addClass("menu-open");
}, function(){
    $(".menu-open").removeClass("menu-open");
});

When the button is clicked, we want to add the class name of “open” to the menu and the page-wrap, and when it is clicked again we want to remove those classes. Thanks to a transition property we set in the CSS below, the properties will transition to their new values.

The CSS

In the CSS is where the fun happens. We will be using CSS3 transitions to accomplish this effect. Browser support is pretty good on it, and we are building this primarily for those on their phones or tablets so we don’t have to worry about IE support.

* {
    padding: 0;
    margin: 0;
    position: relative;
    transition: left 0.25s ease-in-out;
    box-sizing:border-box;
}
html, body {
   height:100%;
   width:100%;
}
.content {
    padding: 20px;
}

A lot of this should be self explanatory.  We apply the transition properties so when we change the class name in jQuery it animates the new properties. The box-sizing:border-box is in place so that our padding doesn’t mess with the height/width of it’s container. The reason we set the height/width to 100% on both the body and the HTML element, is because by default they are only as tall as the content. With this effect, the menu that slides out needs to look like it is the full height of the document so we can force that by setting the HTML/Body elements to be 100% tall.

.button {
    background:black;
    width:25px;
    height:25px;
    margin-bottom:20px;
    cursor:pointer;
}

Simple black square that, when hovered, shows the pointer mouse cursor to show it should be clicked.

.menu:hover {
    cursor:pointer;
}
.menu {
    background:#666;
    padding:20px;
    height:100%;
    width:150px;
    display:block;
    position:absolute;
    z-index:1;
    left:-150px;
}
.menu-item {
    display:block;
    padding:10px;
    color:white;
    text-decoration:none;
}

This is pretty straightforward as well. What’s worth noting is the position:absolute and the left:-150px. It is because of these 2 lines that the menu lives off of the page. We set the left to the negative value of the width of the menu to accomplish this.

.menu.menu-open {
    left:0;
}
.page-wrap.menu-open {
    left:150px;   
}

This is the code that causes the menu to open. We set the menu’s left position to 0 to force it back onto the screen, while simultaneously setting the content’s wrapper to the same width as the menu. The result is a smooth push/pull motion that achieves the desired effect.

Demo