Mobile-friendly Sliding Side Menu Plugin With jQuery

A really simple jQuery plugin used for creating a mobile-friendly, space-saving side navigation that slides out from the top of the webpage with a fullscreen background overlay.

How to use it:

1. Create the mobile side menu as follows:

<div class="mobile-side-menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

2. Create a DIV container for the background overlay.

<div class="overlay"></div>

3. Create a menu toggle button inside the webpage.

<button class="toggleMenu">
  <a href="#">
    Menu
  </a>
</button>

4. Put jQuery library and the core JavaScript file slide-from-top.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="slide-from-top.js"></script>

5. Call the function with default options to initialize the mobile side menu.

$('.mobile-side-menu').slideFromTop();

6. Plugin's default configuration options.

$('.mobile-side-menu').slideFromTop({

   // sidebar menu
   menu : this, 

   // button to toggle the menu
   menuBtn : $('#menuBtn'),     

   // parent container     
   body : $(document.body),

   // throw a modal like overlay
   bodyOverlay: $('.overlay'),     

   // navbar on the top of menu
   navbar: $('.navbar'),    

   // aninmation speed       
   menuSpeed : 500    

});

7. Apply your custom CSS styles the mobile side menu.

.mobile-side-menu {
  font-family: "Open Sans", sans-serif;
  width: 240px;
  display: none;
  background-color: #1b1b1b;
  bottom: 0px;
  z-index: 30;
  overflow-x: hidden;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

.mobile-side-menu ul {
  float: none;
  display: inline-block;
  margin: auto;
  width: 100%;
  background-color: #1b1b1b;
  border-radius: 5px;
  list-style: none;
}

.mobile-side-menu ul > li {
  text-align: left;
  padding-left: 8px;
  border-top: solid 1px #3f3f3f;
  border-bottom: solid 1px #000;
}

.mobile-side-menu ul > li > a {
  text-transform: capitalize;
  text-decoration: none;
  line-height: 20px;
  position: relative;
  display: block;
  font-size: 14px;
  color: white;
  padding: 15px 5px 15px 10px;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 30;
  background-color: rgba(0, 0, 0, 0.7);
}

8. Prevent the body scroll when the side menu is opened.

.noscroll {
  position: fixed;
  right: 0;
  top: 0;
  overflow: hidden;
}

---

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