Touch-enabled Burger Push Menu Plugin With jQuery - SwipeNav
File Size: | 13.8 KB |
---|---|
Views Total: | 14048 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SwipeNav is a mobile-friendly jQuery site navigation plugin which reveals an off-screen push menu by clicking/tapping on the hamburger toggle button.
See also:
How to use it:
1. Load the required CSS file SwipeNav
to style the push menu.
<link rel="stylesheet" href="jquery-swipe-nav.css">
2. Create a nav list for your site navigation.
<nav id="swipeNav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#>Blog</a></li> </ul> </nav>
3. Insert the menu toggle button into your webpage where needed.
<img src="img/list-icon.png" id="menuBtn">
4. Load the jQuery SwipeNav plugin's JavaScript after jQuery library but before the closing body tag.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery-swipe-nav-plugin.js"></script>
5. Enable the plugin.
$('#swipeNav').swipeNav();
6. Default parameters for the swipeNav()
method.
$('#swipeNav').swipeNav({ // target menu menu : this, // menu toggle button menuBtn : $('#menuBtn'), // where the menu should append to body : $(document.body), // animation speed in ms menuSpeed : 300, });
Changelog:
2018-12-27
- JS, CSS, and demo update
This awesome jQuery plugin is developed by Restoration. For more Advanced Usages, please check the demo page or visit the official website.