localStorage Enabled jQuery Push Menu Plugin - Toggle.js

Toggle.js is a simple jQuery plugin to create a mobile-friendly off-canvas push menu (sidebar navigation) that uses HTML5 local storage to preserve the menu open/close stats on your next visit.

Push menu is a modern web design concept that toggles a side menu while pushing the main content to the other side. View our Push Menu page for more push menu plugins.

How to use it:

1. Create the off-canvas menu on the top of the web page.

<nav class="pm-menu-container" id="js-pm-push-menu">
  <h2>Push Menu</h2>
  <p>This is an off-canvas menu</p>
  <p><a href="#">Home</a></p>
  <p><a href="#">Contact</a></p>
  <p><a href="#">About</a></p>
</nav>
<div class="pm-push-pixel" id="js-pm-push-pixel"></div>

2. Inert your main content (push content) together with a menu toggle button into a container with the CSS class of 'pm-content-container'.

<div class="pm-content-container">
  <h2>Main Content Here</h2>
  ...
  <button id="js-pm-toggle-button">Show/Hide</button>
</div>

3. The required CSS styles.

.pm-menu-container {
  background: #47a3da;
  width: 240px;
  height: 100%;
  padding: 50px 30px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -240px;
  z-index: 1000;
  -webkit-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out
}

.pm-menu-container.open { left: 0 }

.pm-menu-container.open-on-load {
  left: 0;
  -webkit-transition: none;
  -o-transition: none;
  transition: none
}

.pm-menu-container a { color: #f0f0f0 }

.pm-menu-container a:focus, .pm-menu-container a:hover { color: #f0f0f0 }

.pm-push-pixel {
  width: 0;
  height: 1px;
  float: left;
  -webkit-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out
}

.pm-push-pixel.open { width: 240px }

.pm-push-pixel.open-on-load {
  width: 240px;
  -webkit-transition: none;
  -o-transition: none;
  transition: none
}

.pm-content-container {
  background-color: #fff;
  padding: 50px;
  color: #47a3da;
  overflow: auto
}

4. Inert jQuery JavaScript library and the toggle.js into the document. That's it.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="toggle.js"></script>

---

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