Floating Sticky Slide Menu Plugin With jQuery - Slide Menu
File Size: | 4.1 KB |
---|---|
Views Total: | 4378 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
How to use it:
1. The plugin uses Font Awesome 4 for the menu toggle icon (Optional).
<link rel="stylesheet" href="font-awesome.min.css">
2. Load the jQuery Slide Menu plugin's JavaScript and CSS files in the webpage which has jQuery library installed.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery-slide-menu.js"></script>
3. The primary HTML structure for the collapsible slide menu.
<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">Caterory</div> <div class="body-slide"> <ul class="nav"> <li><a href="#">jQuery</a></li> <li><a href="#">ReactJS</a></li> <li><a href="#">AngularJS</a></li> </ul> </div> </div> <div class="nav-body"> <div class="head-slide">Social</div> <div class="body-slide"> <ul class="nav"> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Google Plus</a></li> </ul> </div> </div> </div>
4. Call the SlideMenu
method on the top element:
$('.nav-slide').SlideMenu();
5. Adjust the speed of sliding animation.
$('.nav-slide').SlideMenu({ speedLR: 500, speedUD: 500 });
6. Expand the slide menu on page load.
$('.nav-slide').SlideMenu({ expand: true, collapse: true });
This awesome jQuery plugin is developed by webproducer-ir. For more Advanced Usages, please check the demo page or visit the official website.