Responsive Mobile Navigation Plugin With jQuery - Adaptive Menu

Adaptive Menu is a lightweight jQuery plugin used to create a responsive menu that will auto switches to an off-canvas side navigation when the window width reaches a specific breakpoint.

How to use it:

1. The plugin uses CSS3 for smooth menu open / close animations so I recommend you to include the jQuery 3 slim version (6kb gzipped, without AJAX and effects) to reduce the page load time.

<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script>

2. Download and include the following HTML snippets into your document.

<link rel="stylesheet" href="adaptive-menu.default.css">
<script src="jquery.adaptive-menu.js"></script>

3. By default the off-canvas menu will slide in from the left side of the webpage. Include the adaptive-menu.right.css as displayed below to make it slide in from the right side instead.

<link rel="stylesheet" href="adaptive-menu.right.css">

4. Create a nav list for your side navigation.

<div class="wrapmenu">
  <nav>
    <ul class="nav menu topmenu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Recommended</a></li>
      <li><a href="#">Popular</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Jobs</a></li>
      <li><a href="#">Social</a></li>
    </ul>
  </nav>
</div>

5. Call the function on the top container to initialize the plugin:

$('.wrapmenu').adaptiveMenu();

6. The plugin uses CSS3's media queries to determine the current window size. You can change the default break point in pixels during init.

$('.wrapmenu').adaptiveMenu({
  query : 768,
});

7. Not only body element, The plugin also allows you to append the off-canvas menu to any element:

$('.wrapmenu').adaptiveMenu({
  append: 'body'
});

Change log:

2017-01-28

• added callback function

---

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