Responsive Mobile Navigation Plugin With jQuery - Adaptive Menu

File Size: 20.5 KB
Views Total: 3519
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">
    <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>

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


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.

  query : 768,

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

  append: 'body'

Change log:


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