Floating Sticky Slide Menu Plugin With jQuery - Slide Menu

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.