App-style Sliding Menu with jQuery and CSS3

A super simple and lightweight jQuery script used to create a mobile app style sliding menu with an animated hamburger toggle icon.

How to use it:

1. Create the Html for the sliding menu.

<div id="navigator">
  <ul id="nav">
    <li class="nav_tab"> <a href="#">
      <p>Home</p>
      </a> </li>
    <li class="nav_tab"> <a href="#">
      <p>Services</p>
      </a> </li>
    <li class="nav_tab"> <a href="#">
      <p>Works</p>
      </a> </li>
    <li class="nav_tab"> <a href="#">
      <p>Contact</p>
      </a> </li>
    <li class="nav_tab"> <a href="#">
      <p>Blog</p>
      </a> </li>
  </ul>
</div>

2. The core CSS/CSS3 styles for the sliding menu.

#navigator {
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -250px;
  background: rgba(52, 152, 219,0.7);
  float: left;
  z-index: 10;
}

#nav {
  width: 250px;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.nav_tab {
  width: 250px;
  height: 50px;
  display: block;
}

.nav_tab a p {
  color: rgba(255,255,255,0.8);
  font-size: 18px;
  padding: 15px 0;
  text-align: center;
  transition: 0.35s ease;
  -webkit-transition: 0.35s ease;
  -moz-transition: 0.35s ease;
}

.nav_tab a p:hover {
  background: rgba(255,255,255,0.9);
  color: rgba(0,0,0,1);
  letter-spacing: 2px;
  transition: 0.35s ease;
  -webkit-transition: 0.35s ease;
  -moz-transition: 0.35s ease;
}

3. Create the Html for a menu icon to toggle the sliding menu.

<div class="menu-icon">
  <div class="line_one"></div>
  <div class="line_two"></div>
  <div class="line_three"></div>
</div>

4. Add the hamburger transition effect to the menu icon.

.menu-icon {
  width: 150px;
  height: 35px;
  position: fixed;
  top: 0;
  left: 0px;
  margin: 10px;
  z-index: 10;
}

.menu-text {
  width: 50px;
  height: 35px;
  font-size: 30px;
  color: #e67e22;
  display: block;
  position: fixed;
  top: 0;
  left: 50px;
  margin: 10px;
  z-index: 9;
}

.menu-icon div {
  width: 40px;
  height: 5px;
  background: #e67e22;
  margin: 5px;
  transition: all 0.35s;
  border-radius: 2px;
}

.on .line_one { transform: rotate(45deg) translate(7px, 7px); }

.on .line_two { opacity: 0; }

.on .line_three { transform: rotate(-45deg) translate(7px, -7px); }

5. Load the latest version of jQuery JavaScript library in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

6. Enable the sliding menu with a little bit JavaScript.

$(document).ready(function () {

  $('.menu-icon').click(function () {
    if ($('#navigator').css("left") == "-250px") {
      $('#navigator').animate({left: '0px'}, 350);
      $('.menu-icon').animate({left: '250px'}, 350);
      $('.menu-text').animate({left: '300px'}, 350).empty().text("Close");
    } 
    else  {
      $('#navigator').animate({left: '-250px'}, 350); 
      $(this).animate({left: '0px'}, 350);
      $('.menu-text').animate({left: '50px'}, 350).empty().text("Menu");
    } 
  });

  $('.menu-icon').click(function () {
    $(this).toggleClass("on"); 
  });

});

---

This awesome jQuery plugin is developed by Iulius90. For more Advanced Usages, please check the demo page or visit the official website.