localStorage Enabled jQuery Push Menu Plugin - Toggle.js
File Size: | 7.1 KB |
---|---|
Views Total: | 1579 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.