Sliding Navigation & Back To Top Plugin - jQuery KNResponsiveMenu

The KNResponsiveMenu jQuery plugin provides the responsive fullscreen toggle menu and back to top functionality for your long webpage.

The plugin will display a sticky toolbar with the following features as you scroll down the webpage.

• Hamburger button: reveals a sliding sidebar menu on click.
• Page Top button: smoothly scrolls the webpage to the top.

How to use it:

1. Add the stylesheet jquery.KNResponsiveMenu.min.css and JavaScript jquery.KNResponsiveMenu.min.js to the webpage which has jQuery library loaded.

<link rel="stylesheet" href="jquery.KNResponsiveMenu.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.KNResponsiveMenu.js"></script>

2. Wrap the main content in the container '#wrapper'

<div id="wrapper">
  Main content here
</div>

3. Create the responsive menu for your webpage.

<div id="menu">
  <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li>Menu Item 5</li>
  </ul>
</div>

4. Activate the plugin with default settings.

$(document).KNResponsiveMenu();

5. All default customization options.

$(document).KNResponsiveMenu({
  wrapperID: '#wrapper',
  menuID: '#menu',
  menuList: null,
  closeBtn: '#close_button',
  closeBtnPositonTop: '10px',
  closeBtnPositonBottom: null,
  menuBtn: '#menu_button',
  menuBtnPositonTop: null,
  menuBtnPositonBottom: '70px',
  pagetopBtn: '#pagetop_button',
  pagetopBtnPositonTop: null,
  pagetopBtnPositonBottom: '10px',
  pageTop: false, // shows back to top button
  mediaQuery: [ 480, 768, 769 ],
  displayMode: 1 // shows the toolbar based on media queries
});

---

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