Responsive Dropdown Menu Plugin For jQuery - responsive-menu.js

An ultra-light (~1kb) jQuery plugin that automatically converts an ul li based menu into a dropdown toggle navigation on small screens (default breakpoint: screen size < 600px).

How to use it:

1. Load the latest version of JQuery or Zepto library in the webpage.

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

2. Load the style sheet responsive-menu.min.css and JavaScript responsive-menu.min.js in the webpage.

<link rel="stylesheet" href="responsive-menu.min.css">
<script src="responsive-menu.js"></script>

3. Create a normal site navigation from an html list as follows:

<ul id="menu" class="navbar">
  <li><a href="#">Menu 1</a></li>
  <li>
    <a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu 3</a></li>
      <li><a href="#">Submenu 4</a></li>
      <li><a href="#">Submenu 5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
</ul>

4. To setup the responsive menu, call the responsiveMenu method on the top element.

$('#menu').responsiveMenu();

5. Specify the breakpoint to trigger the plugin.

$('#menu').responsiveMenu({
  breakWidth: 1000
});

6. Place the dropdown menu on the right hand side of the webpage.

$('#menu').responsiveMenu({
  position: 'right'
});

7. Set the text displayed in the menu toggle button.

$('#menu').responsiveMenu({
  label: 'Menu'
});

---

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