Minimalist jQuery Responsive Multi-level Nav Menu Plugin - PrMenu

Minimalist jQuery Responsive Multi-level Nav Menu Plugin - PrMenu
File Size: 90.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.prmenu.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. Set options for the responsive menu.

$(document).ready(function(){
$('#responsive-menu').prmenu({}
maintain_ratio: true,
link: '#000000',
visited: '#000000',
hover: '#666666',
active: '#666666',
current: '#444444');
});

Change logs:

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

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.