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

File Size: 12.6 KB
Views Total: 6613
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>
    <a href="#">Menu 2</a>
      <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>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>

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


5. Specify the breakpoint to trigger the plugin.

  breakWidth: 1000

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

  position: 'right'

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

  label: 'Menu'

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