🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Slide Menu is a lightweight jQuery plugin for creating a floating, sticky, collapsible menu that slides out from the left side of the screen just like a drawer.

side-menu drawer slide-menu

Documentation

Jquery Slide Menu

HOW TO USE

First go to website http://fortawesome.github.io/Font-Awesome/ and download the last version of the Font Awesome

Next, include Font Awesome to your project.

And, include the jquery plugin to your project. Jquery Quick Access : (code.jquery.com/jquery-1.10.2.min.js)

1- Include jquery-slide-menu.css in head

2- Include jquery-slide-menu.js in after jquery plugin

3 - Use :

<script type="text/javascript"> 	$(document).ready(function(e) {         $('.nav-slide').SlideMenu({ 			speedLR: 1000, 			speedUD: 500, 			expand: true, 			collapse: true 		});   }); </script> 

6- Html template :

<div class="nav-slide">     <div class="btn-slide"></div>     <div class="nav-body">         <div class="head-slide">Main Menu</div>         <div class="body-slide">             <ul class="nav">                 <li><a href="#">Home</a></li>                 <li><a href="#">About</a></li>                 <li><a href="#">Contact</a></li>             </ul>         </div>     </div>     <div class="nav-body">         <div class="head-slide">Software</div>         <div class="body-slide">             <ul class="nav">                 <li><a href="#">Windows</a></li>                 <li><a href="#">Linux</a></li>                 <li><a href="#">Apple Mac</a></li>             </ul>         </div>     </div>     <div class="nav-body">         <div class="head-slide">Games</div>         <div class="body-slide">             <ul class="nav">                 <li><a href="#">Wrcraft III</a></li>                 <li><a href="#">Dota 2</a></li>                 <li><a href="#">Diablo III</a></li>             </ul>         </div>     </div> </div> 

You May Also Like