Touch-enabled Burger Push Menu Plugin With jQuery - SwipeNav

File Size: 13.8 KB
Views Total: 13980
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#>Blog</a></li>

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="//"></script>
<script src="jquery-swipe-nav-plugin.js"></script>

5. Enable the plugin.


6. Default parameters for the swipeNav() method.


  // target menu
  menu : this,

  // menu toggle button
  menuBtn : $('#menuBtn'),

  // where the menu should append to
  body : $(document.body),

  // animation speed in ms
  menuSpeed : 300,




  • 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.