Lightweight Side Toggle Plugin With jQuery - sideToggle

sideToggle is a super tiny plugin to extend the jQuery's toggle method that allows to toggle any element 'Left To Right' or 'Right To Left' with a smooth animation based on the Velocity.js JavaScript animation engine. Useful in your cross-platform websites to create a mobile app-like off-screen navigation/sidebar that will slide from the edge of the screen when toggled.

How to use it:

1. Load the necessary jQuery and Velocity libraries in your html document.

<script src="/path/to/jquery-3.2.0.min.js"></script>
<script src="/path/to/velocity.min.js"></script>

2. Download and load the sideToggle plugin's script sideToggleExtended.js after jQuery library.

<script src="sideToggleExtended.js"></script>

3. Create a side toggle menu for your webpage.

<div id="sideMenuContainer">
  <h2>Side Menu</h2>
  <a href="#">Menu Item 1</a>
  <a href="#">Menu Item 2</a>
  <a href="#">Menu Item 3</a>
  ...
</div>

4. The CSS to hide the side menu on page load.

#sideMenuContainer {
  background: #202020;
  height: 100%;
  padding: 10px;
  position: fixed;
  top: 56px;
  right: -200px;
  width: 200px;
  z-index: 4;
}

5. Create a trigger element to toggle the side menu.

<div id="sideMenu">
  <span id="sideMenuClosed"></span>
</div>

6. Active the side toggle menu as this:

$('#sideMenu').sideToggle({
  moving: '#sideMenuContainer',
  direction: 'left'
});

---

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