Nowadays more and more peoples browses the internet on mobile phones so we have to create the perfect environment and few some nice aniations will increase the change for that visitor to come back to your website.

To achieve the effect that I am talking about we will use html, css and jquery toggle. We talked about how to use toogleclass in a previous post.  Basically we will create a html structure for our mobile menu and we will position it with fixed position off the screen on the right side. When we will add a class with jquery on the body, the menu will come back on the screen and we will push the body off the screeen on the left side.

Normally this menu will be used with fixed position, but for this example I will use absolute position because I will create the menu on <div> elements, but when you will use it on your own website you can add position fixed to the menu.

HTML structure for our menu and "body":

<div class="second_body">
   <div class="content">
      <div class="mobile_trigger_menu"></div>
   </div>
   <div class="mobile_menu">
      <ul>
       <li><a href="">Home</a></li>
       <li><a href="">About us</a></li>
       <li><a href="">Contact</a></li>
      </ul>
   </div>
</div>

The "second_body" elements holds the place for body that's why I didn't use fixed position for the menu container.

CSS:

.second_body{
    position:relative;
    right:0;
    overflow:hidden;
}
.second_body .mobile_trigger_menu:after{
   content:"\f0c9";
   font-family:FontAwesome;
   color:#fff;
   font-size:40px;
   float:right;
   padding-right:15px;
   cursor:pointer;
}
.second_body .content{
     height:400px;
     position:relative;
     right:0;
     left:0;
     transition:all 0.3s ease-out;
}
.mobile_menu{
    position: absolute;
    right: -150px;
    top: 0;
    bottom: 0;
    background: #000;
    padding: 30px;
    width:150px;
    transition:all 0.3s ease-out;
}
.show_menu .content {
    left: -150px;
    right:150px;
}
.show_menu .mobile_menu{
   right:0;
}
.mobile_menu li a {
    color: #fff;
    margin: 5px 0;
    display: block;
}
.second_body .mobile_trigger_menu.open:after{
    content:"\f00d";
}

Finally few lines of jquery:

jQuery(function(){
   jQuery('.mobile_trigger_menu').on('click', function(){
      jQuery(this).toggleClass('open');
      jQuery('.second_body').toggleClass('show_menu');
   });
});

I added 0.3s ease-out as transition but you can play around with this transition until you get something you like. I will show you more nice animations for menu on the future posts.

If you have any problems implementing this effect you can let a comment below and I will help you to achieve the effect.