Minimalist jQuery Responsive Multi-level Nav Menu Plugin - PrMenu

PrMenu is a very lightweight jQuery plugin that converts a horizontal nav menu into a mobile-friendly toggle menu when the viewport's size reaches a specific breakpoint (Default: 720). 

How to use it:

1. Include the required jQuery PrMenu plugin's stylesheet in your document. Feel free to modify or override the NON-CORE styles to meet your specific design needs.

<link rel="stylesheet" href="css/prmenu.css">

2. Include the jQuery PrMenu plugin's script after loading jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/prmenu.min.js"></script>

3. Create a stardard horizontal navigation menu for your website. In this example, we create a 2-level navigation using nested Html lists.

<ul id="responsive-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Graphic Design</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
  <li><a href="#">Blog</a>
</ul>

4. Call the plugin to active the responsive behavior on mobile devices.

$(document).ready(function(){
  $('#responsive-menu').prmenu();
});

5. Customize the appearance of the responsive menu with the following options.

$('#responsive-menu').prmenu({
  "fontsize": "14",
  "height": "50",
  "case": "uppercase",
  "linkbgcolor": "#000000",
  "linktextcolor": "#ffffff",
  "linktextweight": "400",
  "linktextfont": "sans-serif",
  "hoverdark": false
});

Changelog:

2020-08-02

• v1.0.4: Converted to NPM package.

2019-05-14

• Fixed issue where long menu disappeared while scrolling

2017-01-14

• Fixed issue where mobile menu was open by default when resizing from desktop

2017-01-14

• Adjusted plugin to deal with Bootstrap css conflict

2016-01-17

• Adjusted plugin to deal with Bootstrap css conflict

2015-11-26

• Corrected inability for long mobile menu to scroll

2015-10-04

• CSS update.

2015-08-13

• Adjusted CSS to allow nested link display on mobile

---

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