Touch-enabled Burger Push Menu Plugin With jQuery - SwipeNav

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:

• Top 30 Off-canvas Navigation jQuery Plugins

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.