Generic Sliding Push Drawer Plugin For jQuery - slideNav

slideNav is a simple, mobile-friendly side drawer plugin for easily creating off-canvas push menus, navigations, and any other panel types such as shopping carts, admin panels, etc.

How to use it:

1. Create the left and/or right drawer menus for a specific container as follows:

<div class="slidenav" id="slidenav-demo">
  <div class="slidenav-wrap">
    <!-- Main Content -->
    <h4>Main Content Goes Here</h4>
    ... More Content Goes Here ...

    <!-- Left menu -->
    <div class="slidenav-menu-left">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a>
              <ul>
                <li><a href="#">Link 3.2.1</a></li>
                <li><a href="#">Link 3.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- Right menu -->
    <div class="slidenav-menu-right">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a>
          <ul>
            <li><a href="#">Link 3.1</a></li>
            <li><a href="#">Link 3.2</a>
              <ul>
                <li><a href="#">Link 3.2.1</a></li>
                <li><a href="#">Link 3.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

2. Create the toggle links to open/close the drawer menus:

<a href="#slidenav-demo" data-slidenav-menu="right">Toggle right nav</a>
<a href="#slidenav-demo" data-slidenav-menu="left">Toggle left nav</a>

3. The necessary CSS for the drawer menus. Copy and paste the following CSS styles into your webpage or existing CSS file.

.left { float: left; }

.right { float: right; }

.slidenav { overflow-x: hidden; }

.slidenav-wrap {
  position: relative;
  padding-top: 1px;
  left: 0;
}

[class^="slidenav-menu-"], [class*=" slidenav-menu-"] {
  position: absolute;
  top: 0;
  right: -250px;
  bottom: 0;
  z-index: 100;
  overflow-x: hidden;
  width: 250px;
  background-color: #eee;
}

[class^="slidenav-menu-"]:before, [class^="slidenav-menu-"]:after, [class*=" slidenav-menu-"]:before, [class*=" slidenav-menu-"]:after {
  content: " ";
  display: table;
}

[class^="slidenav-menu-"]:after, [class*=" slidenav-menu-"]:after { clear: both }

.slidenav-menu-right { right: -250px; }

.slidenav-menu-left { left: -250px; }

.slidenav-tierwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
}

.slidenav-tier {
  float: left;
  width: 250px;
}

.slidenav-tierlink { background-color: #E5E5E5; }

.slidenav-tier > .slidenav-tierlink { background-color: #d5d5d5; }

.slidenav-menu-right ul ul, .slidenav-menu-left ul ul { display: none; }

.slidenav-menu-right ul, .slidenav-menu-left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.slidenav-menu-right ul li, .slidenav-menu-left ul li, .slidenav-tier > a { border-bottom: 1px solid #ccc; }

.slidenav-menu-right ul a, .slidenav-menu-left ul a, .slidenav-tier > a, .slidenav-back {
  display: block;
  padding: 7px 15px;
}

4. Load jQuery library and the jQuery slideNav plugin at the bottom of the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-slidenav.js"></script>

5. Initialize the plugin and done.

var mySlideNav = new $.slidenav("#slidenav-demo");

6. Event handlers:

var mySlideNav = new $.slidenav("#slidenav-demo",{
    onOpen: null,
    onOpenEnd: null,
    onClose: null,
    onCloseEnd: null
});

7. Or...

$("#slidenav-demo").on("onOpen", function (e) { console.log("Opening"); });
$("#slidenav-demo").on("onOpenEnd", function (e) { console.log("Open"); });
$("#slidenav-demo").on("onClose", function (e) { console.log("Closing"); });
$("#slidenav-demo").on("onCloseEnd", function (e) { console.log("Closed"); });

---

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